Styling with utility classes

Построение сложных компонентов из ограниченного набора примитивных утилит.

Обзор

Вы стилизуете элементы в Tailwind, комбинируя множество однозадачных презентационных классов (утилитарных классов) прямо в вашей разметке:

ChitChat

У вас новое сообщение!

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />  <div>    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>    <p class="text-gray-500 dark:text-gray-400">У вас новое сообщение!</p>  </div></div>

Например, в приведённом выше UI мы использовали:

Утилиты display и padding (flex, shrink-0, и p-6) для управления общим расположением
Утилиты max-width и margin (max-w-sm и mx-auto) для ограничения ширины карточки и центрирования по горизонтали
Утилиты background-color, border-radius и box-shadow (bg-white, rounded-xl и shadow-lg) для стилизации внешнего вида карточки
Утилиты width и height (size-12) для задания ширины и высоты логотипа
Утилиты gap (gap-x-4) для управления расстоянием между логотипом и текстом
Утилиты font-size, color и font-weight (text-xl, text-black, font-medium и др.) для стилизации текста карточки

Стилизовать элементы таким образом противоречит многим традиционным best practices, но как только вы попробуете — быстро заметите важные преимущества:

Вы делаете всё быстрее — не тратите время на придумывание имён классов, выбор селекторов или переключение между HTML и CSS, поэтому дизайн собирается очень быстро.
Вносить изменения безопаснее — добавление или удаление утилитарного класса влияет только на этот элемент, поэтому не нужно бояться случайно сломать что-то на другой странице, использующей тот же CSS.
Сопровождать старые проекты проще — чтобы что-то изменить, достаточно найти нужный элемент и поменять классы, а не вспоминать, как работает весь кастомный CSS, который вы не трогали полгода.
Ваш код становится более переносимым — так как структура и стили находятся в одном месте, вы легко можете копировать и вставлять целые куски UI, даже между разными проектами.
CSS перестаёт разрастаться — так как утилитарные классы очень переиспользуемы, ваш CSS не растёт линейно с каждым новым фичером.

Эти преимущества заметны даже на маленьких проектах, но особенно ценны для команд, работающих над большими долгоживущими продуктами.

Почему бы просто не использовать инлайн-стили?

Частая реакция на такой подход — удивление: "разве это не просто инлайн-стили?" И в каком-то смысле так и есть — вы применяете стили напрямую к элементам вместо того, чтобы присвоить им имя класса и затем стилизовать этот класс.

Но использование утилитарных классов имеет много важных преимуществ перед инлайн-стилями, например:

Дизайн с ограничениями — используя инлайн-стили, каждое значение становится магическим числом. С утилитами вы выбираете стили из предопределённой системы дизайна, что значительно упрощает создание визуально согласованных интерфейсов.
Наведение, фокус и другие состояния — инлайн-стили не могут нацеливаться на состояния типа hover или focus, но варианты состояний Tailwind позволяют легко стилизовать эти состояния с помощью утилитарных классов.
Медиа-запросы — вы не можете использовать медиа-запросы в инлайн-стилях, но можете использовать адаптивные варианты Tailwind для простого создания полностью адаптивных интерфейсов.

Этот компонент полностью адаптивен и включает кнопку с hover и active стилями, построенную полностью из утилитарных классов:

Наведите на эту кнопку, чтобы увидеть изменение цвета фона

Мышление в утилитарных классах

Стилизация состояний hover и focus

Чтобы стилизовать элемент в состояниях типа hover или focus, добавьте к любой утилите префикс состояния, на которое хотите нацелиться, например hover:bg-sky-700:

Наведите на эту кнопку, чтобы увидеть изменение цвета фона

<button class="bg-sky-500 hover:bg-sky-700 ...">Сохранить изменения</button>

Эти префиксы называются вариантами в Tailwind, и они применяют стили из утилитарного класса только когда условие для этого варианта выполняется.

Вот как выглядит сгенерированный CSS для класса hover:bg-sky-700:

Сгенерированный CSS

.hover\:bg-sky-700 {  &:hover {    background-color: var(--color-sky-700);  }}

Обратите внимание, что этот класс ничего не делает если только элемент не находится в состоянии hover? Его единственная задача — предоставить стили для hover — ничего больше.

Это отличается от того, как вы писали бы традиционный CSS, где один класс обычно предоставлял бы стили для многих состояний:

HTML

<button class="btn">Сохранить изменения</button><style>  .btn {    background-color: var(--color-sky-500);    &:hover {      background-color: var(--color-sky-700);    }  }</style>

Вы даже можете комбинировать варианты в Tailwind, чтобы применять утилиту, когда выполняются несколько условий, например, комбинируя hover: и disabled::

<button class="bg-sky-500 disabled:hover:bg-sky-500 ...">Сохранить изменения</button>

Узнайте больше в документации по стилизации элементов в состояниях hover, focus и других.

Медиа-запросы и контрольные точки

Так же, как состояния hover и focus, вы можете стилизовать элементы на разных контрольных точках, добавляя к любой утилите префикс контрольной точки(брейкпоинта), на котором хотите применить этот стиль:

Измените размер этого примера, чтобы увидеть изменение макета

<div class="grid grid-cols-2 sm:grid-cols-3">  <!-- ... --></div>

В примере выше префикс sm: гарантирует, что grid-cols-3 срабатывает только на контрольной точке sm и выше, что составляет 40rem по умолчанию:

Сгенерированный CSS

.sm\:grid-cols-3 {  @media (width >= 40rem) {    grid-template-columns: repeat(3, minmax(0, 1fr));  }}

Узнайте больше в документации по адаптивному дизайну.

Нацеливание на тёмный режим

Стилизовать элемент в тёмном режиме — это просто вопрос добавления префикса dark: к любой утилите, которую вы хотите применить, когда активен тёмный режим:

Светлый режим

Пишет вверх ногами

Ручка Zero Gravity может использоваться для письма в любой ориентации, включая вверх ногами. Она даже работает в космосе.

Тёмный режим

Пишет вверх ногами

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">  <div>    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">      <svg        class="h-6 w-6 text-white"        fill="none"        viewBox="0 0 24 24"        stroke="currentColor"        aria-hidden="true"      >        <!-- ... -->      </svg>    </span>  </div>  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Пишет вверх ногами</h3>  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">    Ручка Zero Gravity может использоваться для письма в любой ориентации, включая вверх ногами. Она даже работает в космосе.  </p></div>

Так же, как с состояниями hover или медиа-запросами, важно понимать, что один утилитарный класс никогда не будет включать оба светлых и тёмных стиля — вы стилизуете элементы в тёмном режиме, используя несколько классов, один для светлых стилей и другой для тёмных стилей.

Сгенерированный CSS

.dark\:bg-gray-800 {  @media (prefers-color-scheme: dark) {    background-color: var(--color-gray-800);  }}

Узнайте больше в документации по тёмному режиму.

Использование композиции классов

Много раз с Tailwind вы будете даже использовать несколько классов для создания значения для одного CSS свойства, например добавляя несколько фильтров к элементу:

HTML

<div class="blur-sm grayscale">  <!-- ... --></div>

Оба этих эффекта основаны на свойстве filter в CSS, поэтому Tailwind использует CSS-переменные, чтобы сделать возможным композицию этих эффектов вместе:

Generated CSS

.blur-sm {  --tw-blur: blur(var(--blur-sm));  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}.grayscale {  --tw-grayscale: grayscale(100%);  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}

Сгенерированный CSS выше немного упрощён, но хитрость здесь в том, что каждая утилита устанавливает CSS-переменную только для того эффекта, который она должна применить. Затем свойство filter смотрит на все эти переменные, возвращаясь к пустому значению, если переменная не была установлена.

Tailwind использует этот же подход для градиентов, цветов теней, трансформаций и многого другого.

Использование произвольных значений

Много утилит в Tailwind являются темами переменных, такими как bg-blue-500, text-xl, и shadow-md, которые сопоставляются с вашим базовым палитрой, шкалой типов, и тенями.

Когда вам нужно использовать одноразовое значение вне вашей темы, используйте специальную квадратную скобочную нотацию для указания произвольных значений:

HTML

<button class="bg-[#316ff6] ...">  Sign in with Facebook</button>

Это может быть полезно для одноразовых цветов вне вашей палитры (как выше для Facebook blue), но также, когда вам нужно сложное значение, например сложный сетка:

HTML

<div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">  <!-- ... --></div>

Это также полезно, когда вам нужно использовать CSS функции, даже если вы используете свои значения темы:

HTML

<div class="max-h-[calc(100dvh-(--spacing(6)))]">  <!-- ... --></div>

Есть даже синтаксис для генерации полностью произвольного CSS, включая произвольное имя свойства, что может быть полезно для установки CSS переменных:

HTML

<div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">  <!-- ... --></div>

Узнайте больше в документации по использованию произвольных значений.

Как это вообще работает?

Tailwind CSS не один большой статический лист стилей, как вы могли бы привыкнуть с другими CSS фреймворками — он генерирует необходимый CSS на основе классов, которые вы фактически используете при компиляции CSS.

Это делается сканированием всех файлов в вашем проекте, чтобы найти любой символ, который может выглядеть как имя класса:

Button.jsx

export default function Button({ size, children }) {  let sizeClasses = {    md: "px-4 py-2 rounded-md text-base",    lg: "px-5 py-3 rounded-lg text-lg",  }[size];  return (    <button type="button" className={`font-bold ${sizeClasses}`}>      {children}    </button>  );}

После того, как он найдет все потенциальные классы, Tailwind генерирует CSS для каждого и компилирует все в один лист стилей, содержащий только необходимые стили.

Так как CSS генерируется на основе имени класса, Tailwind может распознавать классы, используя произвольные значения, такие как bg-[#316ff6], и генерировать необходимый CSS, даже если значение не является частью вашей темы.

Узнайте больше о том, как это работает в обнаружении классов в исходных файлах.

Сложные селекторы

Иногда вам нужно стилизовать элемент под комбинацией условий, например в тёмном режиме, на конкретном брейкпоинте, когда элемент находится в состоянии hover, и когда элемент имеет конкретный атрибут данных.

Вот пример того, как это выглядит с Tailwind:

HTML

<button class="dark:lg:data-current:hover:bg-indigo-600 ...">  <!-- ... --></button>

Simplified CSS

@media (prefers-color-scheme: dark) and (width >= 64rem) {  button[data-current]:hover {    background-color: var(--color-indigo-600);  }}

Tailwind также поддерживает вещи, такие как group-hover, которые позволяют вам стилизовать элемент, когда конкретный родитель находится в состоянии hover:

HTML

<a href="#" class="group rounded-lg p-8">  <!-- ... -->  <span class="group-hover:underline">Read more…</span></a>

Simplified CSS

@media (hover: hover) {  a:hover span {    text-decoration-line: underline;  }}

Этот group-* синтаксис работает с другими вариантами тоже, как group-focus, group-active, и многими другими.

Для действительно сложных сценариев (особенно при стилизации HTML, который вы не контролируете), Tailwind поддерживает произвольные варианты, которые позволяют вам написать любой селектор, который вы хотите, прямо в имени класса:

HTML

<div class="[&>[data-active]+span]:text-blue-600 ...">  <span data-active><!-- ... --></span>  <span>This text will be blue</span></div>

Simplified CSS

div > [data-active] + span {  color: var(--color-blue-600);}

Когда использовать инлайн-стили

Инлайн-стили все еще очень полезны в Tailwind CSS проектах, особенно когда значение приходит из динамического источника, такого как база данных или API:

branded-button.jsx

export function BrandedButton({ buttonColor, textColor, children }) {  return (    <button      style={{        backgroundColor: buttonColor,        color: textColor,      }}      className="rounded-md px-3 py-1.5 font-medium"    >      {children}    </button>  );}

Вы также можете использовать инлайн-стиль для очень сложных произвольных значений, которые трудно прочитать, когда они форматируются как имя класса:

HTML

<div class="grid-[2fr_max(0,var(--gutter-width))_calc(var(--gutter-width)+10px)]"><div style="grid-template-columns: 2fr max(0, var(--gutter-width)) calc(var(--gutter-width) + 10px)">  <!-- ... --></div>

Другой полезный шаблон — установка CSS переменных на основе динамических источников с помощью инлайн-стилей, а затем ссылаться на эти переменные с помощью утилитарных классов:

branded-button.jsx

export function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) {  return (    <button      style={{        "--bg-color": buttonColor,        "--bg-color-hover": buttonColorHover,        "--text-color": textColor,      }}      className="bg-(--bg-color) text-(--text-color) hover:bg-(--bg-color-hover) ..."    >      {children}    </button>  );}

Управление дублированием

Когда вы создаете целые проекты только с утилитарными классами, вы, несомненно, столкнетесь с повторением определенных шаблонов, чтобы повторить один и тот же дизайн в разных местах.

Например, вот повторяющиеся классы для каждого изображения аватара:

Не паникуйте! На практике это не та проблема, которой вы могли бы беспокоиться, и стратегии для её решения — это то, что вы уже делаете каждый день.

Использование циклов

Часто дизайн-элемент, который появляется более одного раза на отрендеренной странице, на самом деле создаётся только один раз, потому что фактическая разметка рендерится в цикле.

Например, дублирующиеся аватары в начале этого руководства почти наверняка были бы отрендерены в цикле в реальном проекте:

Когда элементы создаются в цикле, фактический список классов создается только один раз, поэтому нет реальной проблемы с дублированием.

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

Когда дублирование локализовано в группе элементов в одном файле, самый простой способ справиться с этим — использовать мультикурсор редактирования для быстрого выбора и редактирования списка классов для каждого элемента одновременно:

<nav class="flex justify-center space-x-4">  <a href="/dashboard" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Home  </a>  <a href="/team" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Team  </a>  <a href="/projects" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Projects  </a>  <a href="/reports" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Reports  </a></nav>

Вы удивитесь, как часто это оказывается лучшим решением. Если вы можете быстро редактировать все дублирующиеся списки классов одновременно, нет смысла вводить дополнительные абстракции.

Использование компонентов

Если вам нужно повторно использовать некоторые стили в нескольких файлах, лучшая стратегия — создать компонент, если вы используете фронтенд-фреймворк, такой как React, Svelte или Vue, или шаблонную часть, если вы используете шаблонный язык, такой как Blade, ERB, Twig или Nunjucks.

Теперь вы можете использовать этот компонент в стольких местах, сколько захотите, при этом сохраняя единый источник истины для стилей, чтобы их можно было легко обновлять вместе в одном месте.

Использование пользовательского CSS

Если вы используете шаблонный язык, такой как ERB или Twig, вместо чего-то вроде React или Vue, создание шаблонной части для чего-то такого маленького, как кнопка, может показаться избыточным по сравнению с простым CSS классом, таким как btn.

Хотя настоятельно рекомендуется создавать правильные шаблонные части для более сложных компонентов, написание некоторого пользовательского CSS вполне допустимо, когда шаблонная часть кажется слишком громоздкой.

Вот как может выглядеть класс btn-primary, используя переменные темы для сохранения согласованности дизайна:

HTML

<button class="btn-primary">Сохранить изменения</button>

CSS

@import "tailwindcss";@layer components {  .btn-primary {    border-radius: calc(infinity * 1px);    background-color: var(--color-violet-500);    padding-inline: --spacing(5);    padding-block: --spacing(2);    font-weight: var(--font-weight-semibold);    color: var(--color-white);    box-shadow: var(--shadow-md);    &:hover {      @media (hover: hover) {        background-color: var(--color-violet-700);      }    }  }}

Однако, для чего-то более сложного, чем просто HTML элемент, мы настоятельно рекомендуем использовать шаблонные части, чтобы стили и структура могли быть заключены в одном месте.

Управление конфликтами стилей

Конфликтные утилитарные классы

Когда вы добавляете два класса, которые нацелены на одно CSS свойство, класс, который появляется последним в стилях, выигрывает. Так в этом примере элемент получит display: grid даже если flex приходит последним в фактическом class атрибуте:

HTML

<div class="grid flex">  <!-- ... --></div>

CSS

.flex {  display: flex;}.grid {  display: grid;}

В целом вы должны просто никогда не добавлять два конфликтующих класса к одному элементу — всегда добавляйте только один, который вы действительно хотите применить:

example.jsx

export function Example({ gridLayout }) {  return <div className={gridLayout ? "grid" : "flex"}>{/* ... */}</div>;}

Используя компонентно-ориентированные библиотеки, такие как React или Vue, это часто означает предоставление конкретных пропов для стилизации пользовательских настроек вместо того, чтобы позволять потребляющим добавлять дополнительные классы извне компонента, так как эти стили часто конфликтовать.

Использование важного модификатора

Когда вам действительно нужно принудительно применить конкретный утилитарный класс и не иметь другого способа управления специфичностью, вы можете добавить ! в конец имени класса, чтобы сделать все объявления !important:

HTML

<div class="bg-teal-500 bg-red-500!">  <!-- ... --></div>

Generated CSS

.bg-red-500\! {  background-color: var(--color-red-500) !important;}.bg-teal-500 {  background-color: var(--color-teal-500);}

Использование важного флага

Если вы добавляете Tailwind в проект, который имеет существующий сложный CSS с высокой специфичностью правилами, вы можете использовать important флаг при импорте Tailwind для отмечания всех утилит как !important:

app.css

@import "tailwindcss" important;

Compiled CSS

@layer utilities {  .flex {    display: flex !important;  }  .gap-4 {    gap: 1rem !important;  }  .underline {    text-decoration-line: underline !important;  }}

Использование префиксного параметра

Если у вашего проекта есть имена классов, которые конфликтуют с утилитами Tailwind CSS, вы можете префикс все утилитарные классы и CSS переменные, используя prefix параметр:

app.css

@import "tailwindcss" prefix(tw);

Compiled CSS

@layer theme {  :root {    --tw-color-red-500: oklch(0.637 0.237 25.331);  }}@layer utilities {  .tw\:text-red-500 {    color: var(--tw-color-red-500);  }}

Обзор

Почему бы просто не использовать инлайн-стили?

Мышление в утилитарных классах

Стилизация состояний hover и focus

Медиа-запросы и контрольные точки

Нацеливание на тёмный режим

Использование композиции классов

Использование произвольных значений

Как это вообще работает?

Сложные селекторы

Когда использовать инлайн-стили

Управление дублированием

Contributors

Использование циклов

Contributors

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

Использование компонентов

Использование пользовательского CSS

Управление конфликтами стилей

Конфликтные утилитарные классы

Использование важного модификатора

Использование важного флага

Использование префиксного параметра

На этой странице