Обработка наведения, фокуса и других состояний

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

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

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>

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

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

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

• Псевдоклассы, такие как :hover, :focus, :first-child и :required
• Псевдоэлементы, такие как ::before, ::after, ::placeholder и ::selection
• Средовые и функциональные запросы, такие как точки разрыва адаптивности, темный режим и prefers-reduced-motion
• Селекторы атрибутов, такие как [dir="rtl"] и [open]

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

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</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 ...">
  Save changes
</button>

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

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

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

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

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <!-- Remove top/bottom padding when first/last child -->
    <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:

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-50 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">Username</span>
    <!-- Using form state modifiers, 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-{модификатор})

Когда вам нужно стилизовать элемент на основе состояния родительского элемента, пометьте родительский элемент классом 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">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

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

Дифференциация вложенных групп

При вложенности групп вы можете стилизовать что-то на основе состояния конкретной родительской группы, присвоив этой родительской группе уникальное имя с помощью класса group/{name} и включив это имя в модификаторы с использованием классов, таких как group-hover/{name}:

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

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

Произвольные группы

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

Для большего контроля вы можете использовать символ &, чтобы отметить, где .group должен оказаться в окончательном селекторе относительно селектора, который вы передаёте.

Стиль, основанный на состоянии соседнего элемента (peer-{модификатор})

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

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

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

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

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

<label>
  <span class="peer-invalid:text-red-500 ...">Email</span>
  <input type="email" class="peer ..."/>
</label>

Дифференциация соседей

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

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

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

Произвольные соседи

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

Для большего контроля вы можете использовать символ &, чтобы отметить, где .peer должен оказаться в окончательном селекторе относительно селектора, который вы передаете.

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

До и после

Стилизуйте псевдоэлементы ::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">
    Email
  </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">
  When you look
  <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">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

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

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

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="relative">
    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

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

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

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

Текст placeholder

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

<label class="relative block">
  <span class="sr-only">Search</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="Search for anything..." 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="Current profile photo" />
  </div>
  <label class="block">
    <span class="sr-only">Choose profile photo</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 не применяется к кнопкам файлов. Это означает, что для добавления границы к кнопке файла вам необходимо явно установить стиль границы с помощью класса, такого как file:border-solid вместе с любой утилитой ширины границы:

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

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

Стилизуйте счётчики или маркеры в списках, используя модификатор marker:

<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul><ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

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

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

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

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified. But I pressed on, and as I made my way past the breakers
    a strange calm came over me. I don't know if it was divine intervention
    or the kinship of all living things but I tell you Jerry at that moment,
    I <em>was</em> a marine biologist.
  </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
">
  Well, let me tell you something, funny boy. Y'know that little stamp, the one
  that says "New York Public Library"? Well that may not mean anything to you,
  but that means a lot to me. One whole hell of a lot.
</p><p class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-white
  first-letter:mr-3 first-letter:float-left
">
  Well, let me tell you something, funny boy. Y'know that little stamp, the one
  that says "New York Public Library"? Well that may not mean anything to you,
  but that means a lot to me. One whole hell of a lot.
</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">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

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

Предпочитает уменьшенное движение

Запрос СМИ prefers-reduced-motion сообщает вам, запросил ли пользователь минимизацию некритичных движений.

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

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="motion-reduce:hidden animate-spin ..." viewBox="0 0 24 24"><!-- ... --></svg>
  Processing...
</button>

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

<!-- Using `motion-reduce` can mean lots of "undoing" styles -->
<button class="hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none ...">
  Save changes
</button>

<!-- Using `motion-safe` is less code in these situations -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition ...">
  Save changes
</button>

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

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

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

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Social Security Number</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">
      We need this to steal your identity.
    </p>
  </label>
</form>

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

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

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

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      This experience is designed to be viewed in landscape. Please rotate your
      device to view the site.
    </p>
  </div>
</div>

Стили печати

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

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

Правила поддержки

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

<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>

Под капотом модификатор supports-[...] генерирует @supports rules и принимает всё, что вы бы использовали с @supports (...) внутри квадратных скобок, таких как пара свойство/значение, а также выражения с использованием and и or.

Для краткости, если вам нужно только проверить, поддерживается ли свойство (а не конкретное значение), вы можете просто указать имя свойства:

<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
  <!-- ... -->
</div>

Вы можете настроить сокращения для общих правил @supports, которые вы используете в своём проекте, в разделе theme.supports вашего файла tailwind.config.js:

module.exports = {
  theme: {
    supports: {
      grid: 'display: grid',
    },
  },
}

Затем вы можете использовать эти пользовательские модификаторы supports-* в своём проекте:

<div class="supports-grid:grid">
  <!-- ... -->
</div>

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

Состояния ARIA

Используйте модификатор aria-*, чтобы условно стилизовать элементы в зависимости от атрибутов ARIA.

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

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
  <!-- ... -->
</div>

По умолчанию мы включили модификаторы для наиболее распространённых булевых атрибутов ARIA:

Вы можете настроить доступные модификаторы aria-*, отредактировав theme.aria или theme.extend.aria в файле tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

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

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

Атрибуты данных

Используйте модификатор data-*, чтобы условно применять стили на основе атрибутов данных.

Поскольку стандартных атрибутов data-* по определению нет, по умолчанию мы поддерживаем только произвольные значения «из коробки», например:

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

Вы можете настроить сокращения для общих селекторов атрибутов данных, которые вы используете в своём проекте, в разделе theme.data файла tailwind.config.js:

module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
}

Затем вы можете использовать эти пользовательские модификаторы data-* в своём проекте:

<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</div>

Поддержка RTL

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

<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>
<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-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

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

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

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

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

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

<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">
      Why do they call it Ovaltine?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>The mug is round. The jar is round. They should call it Roundtine.</p>
    </div>
  </details>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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 или добавлены с помощью плагина:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

<div class="lg:content-auto">
  <!-- ... -->
</div>

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

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

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
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 по умолчанию.

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

Это исчерпывающий список примеров всех псевдоклассовых модификаторов, включённых в 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 ...">
  Submit
</button>

active (:active)

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

<button class="bg-blue-500 active:bg-blue-600 ...">
  Submit
</button>

visited (:visited)

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

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ...">
  Inspiration
</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>More</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>More</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 ..." />