Руководство по стилизации с использованием Tailwind CSS
Создание адаптивных веб-страниц может быть трудным, особенно если вы не хотите иметь дело с ограничениями таких фреймворков, как Bootstrap или Materialize. Эти фреймворки предлагают простой адаптивный стиль, но также могут быть довольно ограничивающими, поскольку требуют, чтобы все было правильно.
Если вы хотите изменить внешний вид кнопки или поля ввода, вам необходимо изменить файл CSS, чтобы отразить эти изменения. А если вы сделаете это неправильно, вы столкнетесь с неприятными конфликтами, которые вам придется исправить с помощью !important.
Конечно, это не очень хорошо, и есть другие подходы. Но еще один простой способ создавать адаптивные веб-сайты без всех ограничений фреймворков - это Tailwind CSS.
Tailwind не предлагает готовых компонентов, таких как стилизованные кнопки. Он предлагает массу служебных классов, которые вы можете использовать для создания собственных кнопок. Это помогает проявить творческий подход. И что самое приятное, это отзывчивость, темный режим и состояния фокуса / наведения смехотворно легко реализовать, используя только классы CSS, которые вам не нужно создавать.
Установка
Tailwind можно установить несколькими способами, в зависимости от того, как вы будете его использовать. Вы можете использовать такую библиотеку, как Next.js, для упрощения реализации, но вы также можете использовать ее в любом Node.js или обычном проекте HTML / CSS / JS. Официальная документация может быть полезна для чтения в зависимости от вашего проекта.
Для простоты я буду использовать проект на основе React. Я буду использовать Next.js, потому что с ним очень легко начать. Я не буду вдаваться в сложные или глубокие особенности. И даже если вы не используете ничего подобного, вы все равно можете изучить эту статью, чтобы изучить Tailwind, поскольку это цель данной статьи.
Настройка Next.js
Настроить минимальный проект Next.js очень просто. Требуется установка NPM. Нам нужно установить React, React-DOM и Next.js через NPM (или Yarn) и настроить наш проект, добавив index.js в папку pages. Вот и все.
npm init -y npm i next react react-dom
Измените сценарии в вашем package.json, чтобы использовать следующий сценарий для запуска проекта Next.js:
Последний шаг - создать /pages/index.js, чтобы у нас была домашняя страница, над которой мы могли бы работать. Вы можете скопировать / вставить этот минимальный файл в качестве домашней страницы:
Когда вы запустите npm run dev сейчас и перейдете к localhost:3000, вы должны увидеть текст. Попробуйте отредактировать файл, чтобы увидеть в действии быстрое обновление. Это последний шаг для установки этого минимального проекта Next.js.
Настройка попутного ветра
Чтобы настроить Tailwind в проекте Next.js, нам нужно установить несколько пакетов через NPM, инициализировать сам Tailwind и импортировать его в наш индексный файл.
npm install tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p
Инициализация Tailwind создаст tailwind.config.js файл и postcss.config.js файл, в которые мы можем добавить анимацию, параметры, включить темный режим и многое другое. Пока оставим его пустым.
Мы импортируем Tailwind в начало нашего index.js файла, написав:
import "tailwindcss/tailwind.css";
Теперь вы можете увидеть, что это работает, если вы добавите служебный класс в свой div, например, text-red-600 или m-4 для красного текста или небольшого поля. Позже мы займемся всеми классами.
Мы настроили все, что нам нужно для работы с Tailwind прямо сейчас, и мы исправим любые другие настройки, которые могут нам понадобиться, когда мы туда доберемся.
Ваш первый элемент
Создать уникальные элементы, такие как кнопки или оповещения, совсем несложно. Это отличный способ узнать, как использовать служебные классы Tailwind и способы создания интерактивности в этих небольших элементах без написания ни единой строчки CSS.
Мы создадим эту простую кнопку. Мы завершим его наведением курсора, чтобы изучить все основы Tailwind.
Цвета
Я всегда начинаю с фона, цветов и стиля шрифта. Это хорошая отправная точка для брендинга и общего внешнего вида. Tailwind предоставляет нам стандартную тему, которую мы можем использовать. Тема состоит из восьми цветов с диапазоном значений от 50 до 900 для светлоты или темноты.
Эти цвета добавляются с помощью bg-green-400 и text-green-900 в случае нашей кнопки. Вы можете использовать любой цвет из темы по умолчанию. А если вам не нравится тема по умолчанию, вы можете добавить свои собственные цвета, что мы увидим позже.
Разные стили
Следующий шаг - все остальные стили. Добавляем закругленные углы и тень для дополнительной глубины. Вы можете прочитать официальную документацию, чтобы убедиться в этом сами.
Базовый стиль состоит из нескольких полей и отступов. Они обозначаются просто буквами p и m с номером. Вы также можете установить конкретное направление интервала с помощью x, y, t, b и т. Д.
Я использовал px-4 py-2 для интервала и добавил font-bold, чтобы сделать кнопку более толстой и читаемой. Я также добавил несколько более простых стилей, таких как shadow и border-radius.
В этом случае мы используем shadow-lg и rounded-lg. -lg означает, что мы добавляем большую тень и больший радиус границы. Если вы опустите -lg, вы просто получите меньший радиус и тень.
Теперь вы можете иметь некоторое представление о том, как это работает. Возможно, вы даже можете попробовать создать свои собственные кнопки, прочитав документацию. Возможно, вы уже представляете себе возможности. Но нашей кнопке не хватает одного: стиля наведения.
Базовая интерактивность
Мы можем определить базовую интерактивность с помощью префиксов. Tailwind много работает с префиксами для стилей, которые необходимо применять при прохождении определенного теста (например, стиль, который должен отображаться только при наведении курсора на кнопку).
Это делается с помощью префикса hover:. Двоеточие является основным разделителем, и если вам по какой-то причине нужно его изменить, вы можете сделать это в файле конфигурации.
Мы хотим определить более темный цвет при наведении курсора на кнопку и, возможно, тень меньшего размера (или ее отсутствие). hover:bg-green-600 и hover:shadow-none отлично подойдут для нас.
Обратите внимание, что вы можете использовать префикс что угодно. При желании можно указать префикс абсолютного положения кнопки. Это обеспечивает большую гибкость и очень важно для оперативности.
Примечание. Вы можете найти последний код кнопки на GitHub, чтобы проверить, совпадает ли ваш код с моим. Я использовал проект Next.js, поэтому имейте в виду, что код, окружающий мою кнопку, может быть другим.
Базовая отзывчивость
Адаптивные веб-страницы можно создать несколькими способами. Самым популярным, вероятно, является Flexbox, в то время как CSS Grid также становится популярным. Tailwind поддерживает их обе, но в этой статье я буду придерживаться Flex.
Мы попытаемся воссоздать этот очень простой адаптивный паттерн с помощью флексбоксов. Это очень просто и требует только базового понимания ящиков, которые мы в основном используем.
Коробки
Этот макет состоит из четырех основных блоков и шести div элементов. Наши четыре блока - это контейнер, верхний колонтитул, нижний колонтитул и основные блоки. Пятый и шестой элементы - это боковая панель и контент, которые находятся в нашем основном блоке.
Основное поле будет строкой, когда у нас макет большего размера, и столбцом, когда у нас макет меньшего размера (например, на телефоне или планшете). И элемент содержимого получит класс flex-grow, который будет иметь большую ширину, чем наша боковая панель.
Код
Мы определяем наш базовый макет с помощью флексбоксов. Вначале нам не нужно добавлять какие-либо классы с префиксом. Мы можем начать с мобильного или настольного макета. Предлагаю начать с мобильной верстки.
В этом коде единственным элементом с префиксом является элемент, который будет изменен при изменении размера экрана. Нашим основным элементом по умолчанию будет столбец, а если размер экрана md, средний или больше, это будет строка. Вы можете увидеть это в строке 4 кода.
Когда вы вставите этот код и запустите его, вы получите макет, соответствующий размеру вашего экрана. Если вы измените размер экрана, элементы изменятся соответствующим образом.
При желании вы также можете добавить элемент, который меняет свой цвет в зависимости от размера экрана. Для этого вы можете использовать префиксы размера экрана вместе с цветами фона.
Многоразовые классы
Конечно, написание всех классов для каждой кнопки каждый раз раздражает, это плохая практика и отличный способ написать несколько вкусных спагетти. Но это не очень хорошо. К счастью, Tailwind дает нам возможность добавлять наши собственные классы с помощью служебных классов Tailwind.
В зависимости от выбранной вами платформы вам может потребоваться добавить несколько папок или документов для работы со статическими файлами CSS. Next.js предлагает простой способ добавления статических файлов CSS и отлично работает с Tailwind. Однако я не буду вдаваться в подробности.
С помощью директивы @apply в файле CSS вы можете добавлять классы Tailwind к своим именам классов. Это значительно улучшает читаемость и ремонтопригодность.
Теперь вы можете использовать эти два класса в своем проекте без необходимости переписывать все служебные классы. Без этой опции Tailwind было бы сложно писать. Но объединение возможностей быстрого прототипирования со способом сохранить их в вашем собственном классе создает мощную библиотеку.
Заключение
Tailwind CSS - замечательная библиотека, к которой нужно немного привыкнуть. Однако, освоив его, вы сможете быстро создавать прототипы адаптивных веб-приложений, которые впоследствии можно будет оптимизировать для производства и обслуживания.
Большое спасибо за чтение и удачного дня.
