1. Основные концепции
  2. Обработка наведения, фокусировки и других состояний

Каждый служебный класс в Tailwind можно применять условно, добавляя в начало имени класса модификатор, описывающий условие, на которое вы хотите ориентироваться.

Например, чтобы применить класс bg-sky-700 при наведении курсора, используйте класс hover:bg-sky-700:

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

<button class="bg-sky-600 hover:bg-sky-700 ...">
  Сохранить изменения
</button>
Как это соотносится с традиционным CSS?

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

Традиционно одно и то же имя класса применяет разные стили при наведении курсора

.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

В Tailwind вместо добавления стилей для состояния наведения к существующему классу вы добавляете еще один класс к элементу, который только что-то делает при наведении курсора.

В Tailwind отдельные классы используются для состояния по умолчанию и состояния наведения

.bg-sky-500 {
  background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

Обратите внимание, как hover:bg-sky-700 только определяет стили для состояния :hover? По умолчанию он ничего не делает, но как только вы наводите курсор на элемент с этим классом, цвет фона изменится на sky-700.

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

Tailwind включает в себя модификаторы практически для всего, что вам когда-либо понадобится, в том числе:

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

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Сохранить изменения
</button>

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


Псевдоклассы

Стилизуйте элементы при наведении, фокусе и активном с помощью модификаторов hover, focus и active:

Попробуйте взаимодействовать с этой кнопкой, чтобы увидеть наведение, фокус и активное состояние

<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Сохранить изменения
</button>

Tailwind также включает модификаторы для других интерактивных состояний, таких как :visited, :focus-within, :focus-visible и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

Первый, последний, нечетный и четный

Стилизуйте элемент, когда он является первым или последним дочерним элементом, используя модификаторы first и last:

  • Kristen Ramos

    kristen.ramos@example.com

  • Floyd Miles

    floyd.miles@example.com

  • Courtney Henry

    courtney.henry@example.com

  • Ted Fox

    ted.fox@example.com

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <!-- Удалите верхнюю / нижнюю прокладку, когда первый / последний ребенок -->
    <li class="flex py-4 first:pt-0 last:pb-0">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

Вы также можете стилизовать элемент, если он является четным или нечетным, используя модификаторы odd и even:

Имя Заголовок Эл. почта
Jane Cooper Regional Paradigm Technician jane.cooper@example.com
Cody Fisher Product Directives Officer cody.fisher@example.com
Leonard Krasner Senior Designer leonard.krasner@example.com
Emily Selman VP, Hardware Engineering emily.selman@example.com
Anna Roberts Chief Strategy Officer anna.roberts@example.com
<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-100 for even rows -->
      <tr class="odd:bg-white even:bg-slate-50">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

Tailwind также включает модификаторы для других структурных псевдоклассов, таких как :only-child, :first-of-type, :empty, и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

Состояния формы

Стилизуйте элементы формы в разных состояниях с помощью таких модификаторов, как required, invalid и disabled:

Попробуйте сделать адрес электронной почты действительным, чтобы увидеть, как меняются стили

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Имя пользователя</span>
    <!-- Using form state modifers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>

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

Tailwind также включает модификаторы для других состояний формы, таких как :read-only, :indeterminate, :checked и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

Стиль на основе родительского состояния (group-{modifier})

Когда вам нужно стилизовать элемент на основе состояния некоторого родительского элемента, пометьте родителя классом group и используйте модификаторы group-*, такие как group-hover, для стилизации целевого элемента:

Наведите указатель мыши на карточку, чтобы увидеть, как оба текстовых элемента меняют цвет

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Новый проект</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Создайте новый проект из множества начальных шаблонов.</p>
</a>

Этот шаблон работает со всеми модификаторами псевдокласса, например, group-focus, group-active или даже group-odd.

Стиль на основе родственного состояния (peer-{modifier})

Когда вам нужно стилизовать элемент на основе состояния элемента sibling, пометьте его с помощью класса peer и используйте модификаторы peer-*, такие как peer-invalid, для стилизации целевого элемента:

Попробуйте сделать адрес электронной почты действительным, чтобы предупреждение исчезло

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Эл. почта</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Пожалуйста, укажите действующий адрес электронной почты.
    </p>
  </label>
</form>

Это позволяет выполнять всевозможные изящные трюки, например плавающие метки, например, без какого-либо JS.

Этот шаблон работает со всеми модификаторами псевдокласса, например, peer-focus, peer-required и peer-disabled.

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

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

<label>
  <span class="peer-invalid:text-red-500 ...">Эл. почта</span>
  <input type="email" class="peer ..."/>
</label>

Псевдоэлементы

До и после

Стилизуйте псевдоэлементы ::before и ::after, используя модификаторы before и after:

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Эл. почта
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

При использовании этих модификаторов Tailwind по умолчанию автоматически добавит content: '', поэтому вам не нужно указывать его, если вы не хотите другое значение:

Когда вы все время выглядите раздраженным люди думают, что вы заняты.
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  Когда вы все время выглядите
  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
    <span class="relative text-white">раздраженным</span>,
  </span>
  люди думают, что вы заняты.
</blockquote>

Стоит отметить, что вам действительно не нужны псевдоэлементы ::before и ::after для большинства вещей в проектах Tailwind - обычно проще просто использовать настоящий HTML-элемент.

Например, вот тот же дизайн сверху, но с использованием псевдоэлемента <span> вместо псевдоэлемента ::before, который немного легче читать и на самом деле содержит меньше кода:

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  Когда вы все время выглядите
  <span class="relative">
    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">раздраженным</span>,
  </span>
  люди думают, что вы заняты.
</blockquote>

Сохраните before и after для ситуаций, когда важно, чтобы содержимое псевдоэлемента фактически не находилось в DOM и не могло быть выбрано пользователем.

Обратите внимание, что если вы отключили наши базовые стили предварительной проверки, свойство содержимого не будет установлено на пустую строку по умолчанию, и вам нужно будет включать content-[''] в любое время. вы используете модификаторы before и after.

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

<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>

Текст-заполнитель

Стилизуйте текст заполнителя любого ввода или текстового поля, используя модификатор placeholder:

<label class="relative block">
  <span class="sr-only">Поиск</span>
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Искать что угодно..." type="text" name="search"/>
</label>

Кнопки ввода файлов

Стилизуйте кнопку в файловых входах с помощью модификатора file:

Текущее фото профиля
<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Текущее фото профиля" />
  </div>
  <label class="block">
    <span class="sr-only">Выберите фото профиля</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700
      hover:file:bg-violet-100
    "/>
  </label>
</form>

Обратите внимание, что Tailwind сброс границы не применяется к кнопкам ввода файлов. Это означает, что для добавления границы к кнопке ввода файла вам необходимо явно установить border-style, используя такой класс, как file:border-solid, рядом с любым border-width:

<input type="file" class="file:border file:border-solid ..." />

Маркеры списка

Примените стиль к счетчикам или маркерам в списках с помощью модификатора marker:

Ingredients

  • 5 чашек нарезанных белых грибов
  • 1/2 стакана оливкового масла
  • 3 фунта сельдерея
<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500">
  <li>5 чашек нарезанных белых грибов</li>
  <li>1/2 стакана оливкового масла</li>
  <li>3 фунта сельдерея</li>
</ul>

Мы разработали модификатор marker как наследуемый, поэтому, хотя вы можете использовать его непосредственно в элементе <li>, вы также можете использовать его для родительского элемента, чтобы не повторяться.

Выделенный текст

Стилизуйте активное выделение текста с помощью модификатора selection:

Попробуйте выделить часть этого текста с помощью мыши

Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе. Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам, Джерри, в тот момент я был морским биологом.

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе.
    Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие.
    Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам,
    Джерри, в тот момент я <em>был</em> морским биологом.
  </p>
</div>

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

Это упрощает настройку цвета выбора в соответствии с вашим брендом на всем сайте:

<html>
<head>
  <!-- ... -->
</head>
<body class="selection:bg-pink-300">
  <!-- ... -->
</body>
</html>

Первая строка и первая буква

Стилизуйте первую строку в блоке содержимого с помощью модификатора first-line, а первую букву - с помощью модификатора first-letter:

Что ж, позволь мне кое-что сказать, веселый мальчик. Вы знаете эту маленькую марку, на которой написано «Публичная библиотека Нью-Йорка»? Что ж, это может ничего не значить для вас, но для меня это много значит. Чертовски много.

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

<p class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
  first-letter:mr-3 first-letter:float-left
">
  Что ж, позволь мне сказать тебе кое-что, смешной мальчик.
  Знаешь эту маленькую марку, на которой написано "Публичная библиотека Нью-Йорка"?
  Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
</p>

Диалоговые фоны

Настройте фон собственного элемента <dialog>, используя модификатор backdrop:

<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

Если вы используете собственные элементы <dialog> в своем проекте, вы также можете прочитать о стилизации открытых/закрытых состояний, используя модификатор open.


Медиа-запросы

Отзывчивые контрольные точки

Чтобы стилизовать элемент в определенной контрольной точке, используйте адаптивные модификаторы, такие как md и lg.

Например, это будет отображать сетку из 3 столбцов на мобильных устройствах, сетку из 4 столбцов на экранах средней ширины и сетку из 6 столбцов на экранах большой ширины:

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>

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

Предпочитает цветовую схему

Медиа-запрос prefers-color-scheme сообщает вам, предпочитает ли пользователь светлую или темную тему, и обычно настраивается на уровне операционной системы.

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

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

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

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

Темный режим

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

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

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

Ознакомьтесь с документацией Темного Режима, чтобы подробно изучить, как работает эта функция.

Предпочитает ограниченные движения

Медиа-запрос prefers-reduced-motion сообщает вам, попросил ли пользователь минимизировать несущественное движение.

Используйте модификатор motion-reduce для условного добавления стилей, когда пользователь запросил уменьшение движения:

Попробуйте эмулировать `prefers-reduced-motion: reduce` в ваших инструментах разработчика, чтобы скрыть счетчик

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="motion-reduce:hidden animate-spin ..." viewBox="0 0 24 24"><!-- ... --></svg>
  Обработка...
</button>

Tailwind также включает модификатор motion-safe, который добавляет стили только тогда, когда пользователь не запросил уменьшение движения. Это может быть полезно, когда использование помощника motion-reduce означало бы «отменить» множество стилей:

<!-- Использование `motion-reduce` может означать множество «отменяющих» стилей. -->
<button class="hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none ...">
  Сохранить изменения
</button>

<!-- Использование `motion-safe` - меньше кода в этих ситуациях -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition ...">
  Сохранить изменения
</button>

Предпочитает контраст

Медиа-запрос prefers-contrast сообщает вам, запросил ли пользователь больше или меньше контраста.

Используйте модификатор contrast-more для условного добавления стилей, когда пользователь запросил больше контраста:

Попробуйте подражать `prefers-contrast: more` в инструментах разработчика, чтобы увидеть изменения

Нам нужно это, чтобы украсть вашу личность.

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Номер социального страхования</span>
    <input class="border-slate-200 placeholder-slate-400 contrast-more:border-slate-400 contrast-more:placeholder-slate-500"/>
    <p class="mt-2 opacity-10 contrast-more:opacity-100 text-slate-600 text-sm">
      Нам нужно это, чтобы украсть вашу личность.
    </p>
  </label>
</form>

Tailwind также включает модификатор contrast-less, который вы можете использовать для условного добавления стилей, когда пользователь запросил меньший контраст.

Ориентация области просмотра

Используйте модификаторы portrait и landscape для условного добавления стилей, когда область просмотра находится в определенной ориентации:

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      Этот опыт предназначен для просмотра в ландшафте. Пожалуйста, поверните ваше устройство, чтобы просмотреть сайт.
    </p>
  </div>
</div>

Стили печати

Используйте модификатор print для условного добавления стилей, которые применяются только при печати документа:

<div>
  <article class="print:hidden">
    <h1>Мой секретный рецепт пиццы</h1>
    <p>Этот рецепт является секретным, и его нельзя никому передавать</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Вы серьезно пытаетесь это напечатать? Это секрет!
  </div>
</div>

Селекторы атрибутов

Поддержка RTL

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

Используйте модификаторы rtl и ltr для условного добавления стилей в режимах справа налево и слева направо соответственно при создании разнонаправленных макетов:

Left-to-right

Tom Cook

Director of Operations

Right-to-left

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>

Обратите внимание, что модификатор ltr не вступит в силу, если для атрибута dir явно не установлено значение ltr, поэтому, если вы создаете разнонаправленный сайт, обязательно всегда задавайте направление, а не только в режиме rtl.

Всегда задавайте направление, даже если по умолчанию слева направо

<html dir="ltr">
  <!-- ... -->
</html>

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

Открытое / закрытое состояние

Используйте модификатор open для условного добавления стилей, когда элемент <details> или <dialog> находится в открытом состоянии:

Попробуйте переключить раскрытие, чтобы увидеть, как меняются стили

Почему они называют его Овальтином?

Кружка круглая. Баночка круглая. Они должны называть это Roundtine.

<div class="max-w-lg mx-auto p-8">
  <details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
    <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
      Почему они называют его Овальтином?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>Кружка круглая. Баночка круглая. Они должны называть это Roundtine.</p>
    </div>
  </details>
</div>

Пользовательские модификаторы

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

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

Произвольные варианты — это просто строки формата, представляющие селектор, заключенные в квадратные скобки. Например, этот произвольный модификатор выбирает элемент, только если он является третьим дочерним элементом:

Строка формата такая же, как и для addVariant API плагина, с символом &, представляющим изменяемый селектор.

Произвольные варианты можно комбинировать со встроенными модификаторами или друг с другом, как и остальные модификаторы в Tailwind:

Если вам нужны пробелы в селекторе, вы можете использовать подчеркивание. Например, этот произвольный модификатор выбирает все элементы p внутри элемента, в который вы добавили класс:

Вы также можете использовать at-правила, такие как @media или @supports в произвольных вариантах:

С пользовательскими модификаторами at-правила заполнитель & не нужен, как и при вложении с препроцессором.

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

Создание плагина

Если вы обнаружите, что используете один и тот же произвольный модификатор несколько раз в своем проекте, возможно, стоит извлечь его в плагин с помощью API addVariant:

tailwind.config.js
let plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addVariant }) {
      // Add a `third` variant, ie. `third:pb-0`
      addVariant('third', '&:nth-child(3)')
    })
  ]
}

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


Дополнительные темы

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

Все модификаторы Tailwind доступны для использования с вашими собственными пользовательскими классами, если вы определили их в одном из макетов Tailwind или добавили их с помощью a плагин:

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
HTML
<div class="lg:content-auto">
  <!-- ... -->
</div>

Порядок сложенных модификаторов

При наложении модификаторов они применяются изнутри, как вызовы вложенных функций:

// Эти модификаторы:
'dark:group-hover:focus:opacity-100'

// ...применяются так:
dark(groupHover(focus('opacity-100')))

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

Например, если у вас настроен darkMode на class, сочетание модификаторов dark и group-hover дает разные результаты в зависимости от того, в каком порядке вы используете:

/* dark:group-hover:opacity-100 */
.dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}

В первом примере элемент dark должен быть родительским элементом элемента group, но во втором примере он перевернут.

Еще одно место, где это важно, - это использование модификаторов, таких как prose-headings, которые включены в официальный плагин типографики:

/* prose-headings:hover:underline */
.prose-headings\:hover\:underline:hover :is(:where(h1, h2, h3, h4, th)) {
  text-decoration: underline;
}

/* hover:prose-headings:underline */
.hover\:prose-headings\:underline :is(:where(h1, h2, h3, h4, th)):hover {
  text-decoration: underline;
}

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


Приложение

Краткий справочник

Краткая справочная таблица по каждому модификатору, включенному в Tailwind по умолчанию.

ModifierCSS
hover&:hover
focus&:focus
focus-within&:focus-within
focus-visible&:focus-visible
active&:active
visited&:visited
target&:target
first&:first-child
last&:last-child
only&:only-child
odd&:nth-child(odd)
even&:nth-child(even)
first-of-type&:first-of-type
last-of-type&:last-of-type
only-of-type&:only-of-type
empty&:empty
disabled&:disabled
enabled&:enabled
checked&:checked
indeterminate&:indeterminate
default&:default
required&:required
valid&:valid
invalid&:invalid
in-range&:in-range
out-of-range&:out-of-range
placeholder-shown&:placeholder-shown
autofill&:autofill
read-only&:read-only
open&[open]
before&::before
after&::after
first-letter&::first-letter
first-line&::first-line
marker&::marker
selection&::selection
file&::file-selector-button
backdrop&::backdrop
placeholder&::placeholder
sm@media (min-width: 640px)
md@media (min-width: 768px)
lg@media (min-width: 1024px)
xl@media (min-width: 1280px)
2xl@media (min-width: 1536px)
dark@media (prefers-color-scheme: dark)
portrait@media (orientation: portrait)
landscape@media (orientation: landscape)
motion-safe@media (prefers-reduced-motion: no-preference)
motion-reduce@media (prefers-reduced-motion: reduce)
contrast-more@media (prefers-contrast: more)
contrast-less@media (prefers-contrast: less)
print@media print
rtl[dir=“rtl”] &
ltr[dir=“ltr”] &

Справочник псевдоклассов

Это исчерпывающий список примеров для всех модификаторов псевдоклассов, включенных в Tailwind в дополнение к документации псевдоклассов в начале этого руководства.

hover (:hover)

Стилизуйте элемент, когда пользователь наводит на него курсор мыши, используя модификатор hover:

<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>

focus (:focus)

Стилизуйте элемент, когда он находится в фокусе модификатора focus:

<input class="border-gray-300 focus:border-blue-400 ..." />

focus-within (:focus-within)

Стилизуйте элемент, когда он или один из его потомков имеет фокус, используя модификатор focus-within:

<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>

focus-visible (:focus-visible)

Стилизуйте элемент, когда он был сфокусирован с помощью клавиатуры, используя модификатор focus-visible:

<button class="focus:outline-none focus-visible:ring ...">
  Отправить
</button>

active (:active)

Стилизуйте элемент при нажатии с помощью модификатора active:

<button class="bg-blue-500 active:bg-blue-600 ...">
  Отправить
</button>

visited (:visited)

Создайте стиль для ссылки, когда она уже была посещена, с помощью модификатора visited:

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ...">
  Вдохновение
</a>

target (:target)

Примените стиль к элементу, если его идентификатор совпадает с текущим фрагментом URL-адреса, используя модификатор target:

<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>

first (:first-child)

Стилизуйте элемент, если это первый дочерний элемент, с помощью модификатора first:

<ul>
  {#each people as person}
    <li class="py-4 first:pt-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

last (:last-child)

Стилизуйте элемент, если это последний дочерний элемент, используя модификатор last:

<ul>
  {#each people as person}
    <li class="py-4 last:pb-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

only (:only-child)

Стилизуйте элемент, если это единственный дочерний элемент, использующий модификатор only:

<ul>
  {#each people as person}
    <li class="py-4 only:py-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

odd (:nth-child(odd))

Создайте стиль для элемента, если это дочерний элемент со странным номером, используя модификатор odd:

<table>
  {#each people as person}
    <tr class="bg-white odd:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

even (:nth-child(even))

Примените стиль к элементу, если он является дочерним элементом с четным номером, используя модификатор even:

<table>
  {#each people as person}
    <tr class="bg-white even:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

first-of-type (:first-of-type)

Стилизуйте элемент, если это первый дочерний элемент своего типа, используя модификатор first-of-type:

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="ml-2 first-of-type:ml-6 ...">
      <!-- ... -->
    </a>
  {/each}
</table>

last-of-type (:last-of-type)

Стилизуйте элемент, если это последний дочерний элемент своего типа, используя модификатор last-of-type:

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mr-2 last-of-type:mr-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>Больше</button>
</table>

only-of-type (:only-of-type)

Стилизуйте элемент, если это единственный дочерний элемент своего типа, используя модификатор only-of-type:

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 only-of-type:mx-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>Больше</button>
</table>

empty (:empty)

Примените стиль к элементу, если у него нет содержимого, используя модификатор empty:

<ul>
  {#each people as person}
    <li class="empty:hidden ...">{person.hobby}</li>
  {/each}
</ul>

disabled (:disabled)

Стиль ввода, когда он отключен, с помощью модификатора disabled:

<input class="disabled:opacity-75 ..." />

enabled (:enabled)

Стиль ввода, когда он включен, с помощью модификатора enabled, наиболее полезен, когда вы хотите применить другой стиль только тогда, когда элемент не отключен:

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

checked (:checked)

Создайте стиль для флажка или переключателя, когда он установлен, с помощью модификатора checked:

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

indeterminate (:indeterminate)

Установите флажок или переключатель в неопределенное состояние с помощью модификатора indeterminate:

<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

default (:default)

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

<input type="checkbox" class="default:ring-2 ..." />

required (:required)

Стиль ввода, когда это необходимо, с помощью модификатора required:

<input class="required:border-red-500 ..." />

valid (:valid)

Создайте стиль для ввода, если он допустим, используя модификатор valid:

<input class="valid:border-green-500 ..." />

invalid (:invalid)

Стиль ввода, если он недействителен, с помощью модификатора invalid:

<input class="invalid:border-red-500 ..." />

in-range (:in-range)

Стиль ввода, когда его значение находится в пределах указанного диапазона, с помощью модификатора in-range:

<input min="1" max="5" class="in-range:border-green-500 ..." />

out-of-range (:out-of-range)

Стиль ввода, когда его значение выходит за пределы указанного диапазона, с помощью модификатора out-of-range:

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

placeholder-shown (:placeholder-shown)

Стиль ввода, когда заполнитель отображается, с помощью модификатора placeholder-shown:

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

autofill (:autofill)

Стиль ввода, когда он был автоматически заполнен браузером, с помощью модификатора autofill:

<input class="autofill:bg-yellow-200 ..." />

read-only (:read-only)

Стиль ввода, когда он доступен только для чтения, с помощью модификатора read-only:

<input class="read-only:bg-gray-100 ..." />