Используем фреймворк Tailwind CSS

Tailwind CSS на данный момент обгоняет по популярности все остальные CSS-фреймворки. По своей сути это utility-first CSS-фреймворк. В отличие от Bootstrap или Bulma, он не предоставляет готовые компоненты, а дает набор низкоуровневых utility-классов, из которых можно собрать интерфейс прямо в HTML.

Пример использования:

В этой статье мы рассмотрим такие вопросы:

• Подключение Tailwind CSS
• HTML и классы Tailwind CSS
• Группа Layout
• Группа Flexbox & Grid
• Отступы и размеры
• Текст и шрифты
• Цвета и фон
• Адаптивность (Responsive)
• Hover, Focus, Active
• Использование ::before и ::after
• Dark Mode - темная тема

Почему Tailwind стал таким популярным

Плюсы:

• Очень быстрая разработка интерфейсов;
• Полный контроль над дизайном;
• Нет «мертвого» CSS;
• Удобная адаптивность;
• Встроенная поддержка dark mode;
• Отличная кастомизация.

Минусы:

• HTML выглядит перегруженным немаленьким количеством классов в каждом элементе;
• Нужно привыкнуть к синтаксису;
• Без сборки (build step) использовать неудобно.

Подключение Tailwind CSS

Несмотря на то, что Tailwind CSS - это CSS-фреймворк, его нужно подключать через тег <script> с CDN (для тестов и демо, но не для готового проекта):

Можно даже кастомизировать:

В различные JavaScript-фреймворки и библиотеки Tailwind CSS нужно подключать в терминале несколькими командами + добавлять настройки и директиву @import в основной файл проекта. Как это сделать для множества библиотек, можно найти на официальном сайте. Про подключение Tailwind CSS для проекта React+Vite также можно прочитать в отдельной статье.

Поскольку любые такие проекты собираются воедино какой-либо командой в терминале типа npm run dev для проекта React+Vite, одновременно происходит и сборка всех классов Tailwind CSS, которые нужны для текущего проекта.

HTML и классы Tailwind CSS

В коде html-разметки вы будете использовать, как правило, набор классов Tailwind CSS:

Подход Tailwind CSS в данном случае такой - каждый класс отвечает за какое-то одно свойство: класс flex за свойство display: flex, класс items-center за align-items: center, класс font-bold за font-weight: bold и т.п. Таким образом, чтобы манипулировать этими классами, нужно очень даже неплохо знать CSS с точки зрения свойство: значение, чтобы даже интуитивно можно было писать свои классы, не заглядывая в документацию.

Основные группы классов Tailwind CSS

Группа Layout

Классы:

• container, columns-md - контейнер и столбцы (колонки);
• block, flex, grid - различные варианты свойства display;
• hidden - спрятанные элементы;
• absolute, relative, fixed - классы для позиционирования элементов.

Группа Flexbox & Grid

Классы:

• flex-row, flex-col
• items-center
• justify-between
• gap-4

Пример разметки контента

See the Pen Tailwind CSS example by HTML-plus (@ambassador) on CodePen.

Отступы и размеры

• m, mt, mx, m-auto, mt-6 - классы для назначения margin;
• p, py, pl-4, p-6 - все классы для назначения padding;
• w-xs, w-lvw, w-1/2, w-full - классы для назначения ширины элемента;
• h-screen, h-full, h-1/2, h-42 - классы для назначения высоты элемента.

Пример использования различных классов:

See the Pen Tailwind CSS example by HTML-plus (@ambassador) on CodePen.

В этом примере футере для центрирования списка из 2-х ссылок используется не ожидаемый класс text-center, который подразумевает использование такого свойства, как text-align: center, а комбинация из классов w-fit + mx-auto . "Под капотом" здесь лежат такие свойства, как width: fit-content, которое говорит, что ширина элемента равна ширине его содержимого, плюс класс mx-auto, который позволяет  auto-margin распределить свободное место слева и справа от элемента ul.

Немного подробнее о классах с отступами на примере тех, что управляют свойством padding:

• p обозначает отступ по всему элементу.
• py обозначает отступы: padding-top и padding-bottom.
• px обозначает отступ слева и отступ справа.
• pt обозначает верхний отступ.
• pr обозначает отступ справа.
• pb обозначает нижний отступ.
• pl  обозначает отступ слева

И еще несколько классов, связанных с шириной

Текст и шрифты

Классы:

• text-sm, text-lg, text-3xl - размеры текста можно найти в документации;
• font-light, font-semibold - классы для толщины шрифта и курсива;
• leading-tight - классы для межстрочного расстояния;
• uppercase - изменение начертания букв;
• decoration-solid - классы для подчеркивания

Цвета и фон

Классы:

• bg-blue-500 - для фона;
• text-red-600 - для текста;
• border-gray-300- для рамки.

Tailwind использует шкалу от 50 до 950. В документации вы найдете все основные примеры.

Все цвета можно найти на сайте tailwindcolor.com.

Hover, Focus, Active

Поддерживаются:

• hover:
• focus:
• active:
• disabled:
• group-hover

Подробнее в документации. Но, если говорить подробнее, то наверняка вы знаете разницу между этими состояниями и заодно псевдоклассами:

В качестве примера рассмотрим простую форму, в которой в поле <input type="email"> есть классы, связанные и с hover:, и с focus:, а в элементе <button> -  hover: и active:.

See the Pen Tailwind CSS form hover: and focus: example by HTML-plus (@ambassador) on CodePen.

Обратите внимание, что мы отключаем здесь доступный во всех формах по умолчанию outline с помощью кода focus:outline-none. Однако заменяем его альтернативным поведением focus:ring-2 focus:ring-sky-200 для подсветки действия фокуса.

Использование класса peer в Tailwind CSS

Пример с кнопкой в состоянии disabled подразумевает вариант, когда мы используем класс peer и определенную вложенность элементов друг в друга для того, чтобы при активации чекбокса отобразить доступную кнопку. Причем делаем это не за счет JavaScript, а за счет специальных классов Tailwind CSS.

See the Pen Tailwind CSS form disabled: example by HTML-plus (@ambassador) on CodePen.

Сразу возникает вопрос - что такое peer в Tailwind CSS?

Так вот, peer — это класс-маркер, который ты ставишь на элемент, чтобы следующие элементы могли реагировать на его состояние.

Здесь: input содержит класс peer, т.е. от него зависит поведение соседнего/родственного элемента, span реагирует на состояние checked у input.peer, получая класс bg-green-500.

Если заглянуть "под капот" Tailwind CSS, то увидим примерно такой код:

Ключевой момент — родственный селектор ~. С точки зрения работы этого селектора, это значит следующее: если элемент с классом .peer находится в состоянии :checked, то все элементы после него с нужным классом получат стиль от классаbg-green-500.

Давайте попробуем нажать на чекбокс, чтобы посмотреть пример в действии:

See the Pen Tailwind CSS form class peer example by HTML-plus (@ambassador) on CodePen.

Очень важные ограничения peer:

Элемент с классом peer НЕ может идти ПОСЛЕ элемента, который должен реагировать на его изменение.

Элемент, который содержит класс peer-checked НЕ может быть вложен в другой элемент. Только тот же уровень вложенности, что и у элемента с классом peer.

Чаще всего такое поведение работает для состояний:

• peer-hover:*
• peer-focus:*
• peer-checked:*
• peer-disabled:*
• peer-placeholder-shown:*

Возьмем еще пример из документации Tailwind CSS:

See the Pen Tailwind CSS form class peer example by HTML-plus (@ambassador) on CodePen.

Здесь показано, что при использовании нескольких узлов можно стилизовать состояние конкретного узла , присвоив ему уникальное имя с помощью peer/{name}класса и включив это имя в варианты, используя такие классы, как peer-checked/{name}:.

Еще один отличный пример с использованием класса peer для реализации off-canvas меню, которое выезжает в мобильной версии с левой стороны страницы. Для того чтобы посмотреть на вариант в мобильной версии, щелкните на вкладку HTML.

See the Pen Tailwind CSS form class peer mobile menu example3 by HTML-plus (@ambassador) on CodePen.

Единственный минус - это отсутствие возможности закрыть выезжающее меню. Но этот минус исправлен ниже. Хотя в следующем примере off-canvas-menu выезжает справа.

See the Pen Tailwind CSS form class peer off-canvas menu example4 by HTML-plus (@ambassador) on CodePen.

Использование group-hover

Вы можете задать поведение элементов внутри контейнера, когда наведение выполняется не на сам элемент, а на весь контейнер. Без JavaScript. Без вложенных селекторов. Без кастомного CSS.

В обычном CSS это выглядело бы так:

В Tailwind CSS то же самое записывается в виде классов:

Здесь group — это маркер, а не стиль.

Пример с группировкой для полей ввода вы найдете ниже.

See the Pen Tailwind CSS form hover: and focus: example by HTML-plus (@ambassador) on CodePen.

Как group-hover устроен внутри Tailwind

Шаг 1. Родитель помечается как группа: <div class="group">

Tailwind генерирует селектор:

Шаг 2. Дочерний элемент подписывается на hover группы: к нему добавляются классы group-hover:text-blue-500.

Это буквально значит: "применить этот стиль, когда .group находится в состоянии hover".

Когда group-hover — правильный выбор:

Карточки

• подсветить иконку
• показать кнопку
• затемнить фон

Формы

• показать подсказку
• активировать label
• подсветить иконку поля

Навигация

• dropdown
• underline
• стрелки

Если у вас интерактивность прописывается для одного элемента (кнопка, input) group-hover использовать НЕ стоит.

Псевдокласс focus-within

Псевдокласс :focus-within срабатывает на родителе, если ЛЮБОЙ его потомок получил фокус. На примере в связке HTML+ обычный CSS это выглядит так: при клике внутри поля input содержащий его div становится красным.

В Tailwind CSS вместо псевдокласса вы используете класс focus-within:* для формы, как для родителя любого элемента формы: input, textarea, select или button. Если нужно сделать что-либо для других элементов, не входящих в формы (div, p, span), тогда нужно форме добавлять класс group, а для div-а или абзаца записывать group-focus-within:*.

Пример с focus-within: в Tailwind CSS и group для подсветки формы и вывода сообщения.

See the Pen Tailwind CSS focus-within example by HTML-plus (@ambassador) on CodePen.

Здесь срабатывает такая схема действий: клик в input приводит к тому, что <form> получает focus-within, а <p> реагирует через group-focus-within.

Еще один пример с focus-within - популярное на многих сайтах dropdown, или выпадающее меню.

See the Pen Tailwind CSS dropdown example by HTML-plus (@ambassador) on CodePen.

Почему в примере мы НЕ используем hover, а именно focus-within?

Ну, и на сладкое - мега-меню на основе Tailwind CSS:

See the Pen Tailwind CSS dropdown menu example by HTML-plus (@ambassador) on CodePen.

Использование ::before и ::after

Псевдоэлементы ::before и  ::after дают много вариантов управления контентом, причем именно с точки зрения использования еще и анимации.  С точки зрения Tailwind CSS вы можете указать их таким образом:

Здесь код after:content-['*'] дает нам звездочку после текста Email в label, код after:text-red-500 красит эту звездочку в красный цвет, а код after:ml-0.5 дает отступ слева от звездочки от текста. Второй пример дает нам абсолютное позиционирование блочного скошенного псевдоэлемнта ::before без контента, но с цветом фона.

See the Pen Tailwind CSS button example by HTML-plus (@ambassador) on CodePen.

Отсутствие контента также можно записать, как before:content-['']:

В примере ниже у нас есть изменение кнопок при наведении с анимацией. В самих кнопках псевдоэлементы ::before и  ::after используются для создания эффектов при наведении.

See the Pen Tailwind CSS button example by HTML-plus (@ambassador) on CodePen.

Анимацию создаёт комбинация классов  transition-* + duration-*. Например в коде <span class="block px-6 py-3 transition-opacity duration-300 hover:opacity-0">Learn More</span> подразумевается, что transition-opacity изменяет именно свойство opacity с помощью анимации типа transition. При наведении hover:opacity-0 уменьшает непрозрачность до 0 за 300мс, за что отвечает класс duration-300.

Borders & Shadow

Классы:

• rounded, rounded-xl - классы для скругления рамок;
• border-2 - размер рамок, цвет рамок, стиль рамок;
• shadow, shadow-lg - классы для создания теней;
• text-shadow-md - классы для текстовых теней;
• opacity-25 - классы для создания полупрозрачности.

Адаптивность (Responsive)

Tailwind CSS использует mobile-first подход.

Брейкпоинты по умолчанию:

В примере ниже у нас есть 6 карточек в ряд на экране компьютера и на мобильном: 1 начальная карточка + 2 карточки в 2 ряда + 1 карточка замыкающая. Для того чтобы увидеть мобильную версию, откройте дополнительно вкладку HTML.

See the Pen Tailwind CSS adaptive example by HTML-plus (@ambassador) on CodePen.

Div-контейнер для карточек

Это не контейнер для всего текста, только для 6 вложенных в него элементов-карточек. Он имеет следующий код:

Здесь мы указываем, что будем использовать сетку (grid) из 4-х колонок, но в lg-версии (большой экран) таких колонок будет 6.

Карточки 1 и 6 (большая на mobile)

В разметке есть такие моменты:

• col-span-4 → занимает всю ширину (mobile)
• lg:col-span-1 → 1/6 на desktop
• text-2xl → больше только на mobile
• lg:text-lg → выравниваем на desktop
• text-red-700 lg:text-red-400 → цвет текст тоже изменяется с более темного на более светлый

Карточки 2–5 (обычные)

• На mobile: col-span-2 + grid-cols-4 → получается 2 карточки в ряд (2 ряда по 2)
• На desktop: lg:col-span-1 → все в одну линию

Тот же пример можно разобрать на Flexbox-модели:

See the Pen Tailwind CSS adaptive grid example by HTML-plus (@ambassador) on CodePen.

Тут классы сложней за счет того, что в divе-контейнере присутствует класс gap-6: <div class="flex flex-wrap gap-6">. Поэтому во вложенных карточках нужно рассчитывать ширину с учетом этого расстояния, иначе карточки не поместятся в контейнер:

Класс basis-full → 100% ширины (mobile). А вот размер basis приходится делить на 6 на desktop: это 16.666%  и еще отнимаем 1.25rem .

Откуда взялись 1.25rem?

• Каждый из gap-6 = 1.5rem
• Однако у нас на 1 gap меньше 6, т.к. 6 карточек → 5 промежутков (gaps)
• Поэтому на одну карточку приходится ≈ 1.5rem × 5 / 6 ≈ 1.25rem

По 2 карты в 2 ряда

Тут у нас на desktop с разными размерами экрана разные классы в зависимости от значения gap. А на mobile класс рассчитываем, какbasis-[calc(50%-0.75rem)], т.к. класс  gap-6 дает нам отступ между колонками в 1.5rem. Нам же нужно, чтоб половина его ушла в одну карточки и половина - в другую.

Выглядит не очень понятно? Поэтому в таком варианте лучше либо grid-модель, либо Bootstrap.

Классы с gap-* в Tailwind CSS:

Dark Mode - темная тема

Вы можете включить темный режим - Dark Mode - в настройках Tailwind CSS. Для этого для проектов на React, Angular и т.п. в файле tailwind.config.js должно быть указано darkMode: 'class'.

Для использования темной темы можно переопределить запросом:

Кроме того, можно задать настройки в файле tailwind.config.js, если он предусмотрен в проекте:

Здесь darkMode: 'class' = управляем темой сами (не зависит от системы пользователя)

Если мы говорим о настройках в HTML-файле без использования React, Next, Vue.js (например, тестовый вариант на codepen.io), то нам нужно тоже добавить настройку в виде строки darkMode: 'class' в tailwind.config:

Важно: это JavaScript-код.

Тут важно понять, что Tailwind CSS не переключает тему сам. Он реагирует на класс dark, который добавляется на родительский элемент — обычно <html> или <body>. В разметке это выглядит так.

HTML-код:

После этого все классы dark:* начинают работать, например, здесь:

Пример:

See the Pen Tailwind CSS dark-light mode by HTML-plus (@ambassador) on CodePen.

Как читать классы dark: если в коде есть классы bg-white dark:bg-gray-400, то они означают следующее:

• по умолчанию → bg-white
• если есть .dark → bg-gray-400

Можно легко сделать кнопку-переключатель светлой/темной темы, которая будет выполнять простой код при нажатии: html.classList.toggle('dark'). Пример:

See the Pen Tailwind CSS section dark-light mode by HTML-plus (@ambassador) on CodePen.

Частая ошибка новичков: писать <div class="dark:bg-gray-900">, но при этом не использовать <html class="dark">. В этом случае работать не будет.

Автоматический выбор темы

Можно задать настройку darkMode: 'media', но в этом случае оформление полностью будет зависеть от того, какую тему выбрал в настройках браузера пользователь. Управлять будет нельзя.

Ограничения значения darkMode: 'media'

Нельзя:

• сделать кнопку «переключить тему»
• сохранить выбор пользователя
• переопределить системную тему

Можно:

• использовать управление классами в виде dark:*
• комбинировать с hover:, focus: и т.д.
• писать один и тот же HTML

Пример:

See the Pen Tailwind CSS section dark-light mode by HTML-plus (@ambassador) on CodePen.

В браузере Chrome вы можете выбрать настройки темы  в меню Внешний вид. В этом случае вид страницы с Tailwind CSS будет также меняться.

Плагин для VSCode

Кстати, вы можете скачать плагин IntelliSense для VS Code, чтобы вам было удобно добавлять классы Tailwind CSS, т.к. там присутствуют такие функции, как автозаполнение, подсветка и проверка синтаксиса.