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

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

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

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

<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:

<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">Имя пользователя</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-{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.

​Отличие вложенных групп

При вложенных группах вы можете стилизовать что-то на основе состояния специфической родительской группы, дав этому родителю уникальное имя группы, используя класс 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-* на лету, указав свой собственный селектор в виде произвольного значения между квадратными скобками:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

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

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

​Стиль на основе родственного состояния (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>

​Отличие сверстников

При использовании нескольких одноранговых узлов вы можете стилизовать что-либо в состоянии определенного однорангового узла, дав этому одноранговому узлу уникальное имя с помощью класса 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-* на лету, указав свой собственный селектор в виде произвольного значения между квадратными скобками:

<form>
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" class="is-dirty peer" required />
  <div class="peer-[.is-dirty]:peer-required:block hidden">Это поле обязательно к заполнению.</div>
  <!-- ... -->
</form>

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

<div>
  <input type="text" class="peer" />
  <div class="hidden peer-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

​Стилизация прямых дочерних элементов (*-{modifier})

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

<div>
  <h2>Categories<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

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

<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

​Стилизация на основе потомков (has-{modifier})

Используйте модификатор has-* для стилизации элемента на основе состояния или содержимого его потомков.

<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ..">
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="checked:border-indigo-500 ..." />
</label>

Вы можете использовать has-* с псевдоклассом, например has-[:focus], чтобы стилизовать элемент на основе состояния его потомков. Вы также можете использовать селекторы элементов, такие как has-[img] или has-[a], чтобы стилизовать элемент на основе содержимого его потомков.

​Стилизация на основе потомков группы (group-has-{modifier})

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

Spencer Sharp

Product Designer at planeteria.tech

Casey Jordan

Just happy to be here.

Alex Reed

A multidisciplinary designer, working at the intersection of art and technology.
alex-reed.com

Taylor Bailey

Pushing pixels. Slinging divs.

<div class="group ...">
  <img src="..." />
  <h4>Spencer Sharp</h4>
  <svg class="hidden group-has-[a]:block ...">
    <!-- ... -->
  </svg>
  <p>Product Designer at <a href="...">planeteria.tech</a></p>
</div>

​Стилизация на основе потомков однорангового узла (peer-has-{modifier})

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

<fieldset>
  <legend>Today</legend>

  <div>
    <label class="peer ...">
      <input type="checkbox" name="todo[1]" checked />
      Create a to do list
    </label>
    <svg class="peer-has-[:checked]:hidden ...">
      <!-- ... -->
    </svg>
  </div>

  <!-- ... -->
</fieldset>

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

​До и после

Стилизуйте псевдоэлементы ::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:

<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><ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <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><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
">
  Что ж, позволь мне сказать тебе кое-что, смешной мальчик.
  Знаешь эту маленькую марку, на которой написано "Публичная библиотека Нью-Йорка"?
  Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
</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" 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 для условного добавления стилей, когда пользователь запросил уменьшение движения:

<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 для условного добавления стилей, когда пользователь запросил больше контраста:

<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, который вы можете использовать для условного добавления стилей, когда пользователь запросил меньший контраст.

​Режим принудительного цвета

Медиа-запрос forced-colors указывает, использует ли пользователь режим принудительного цвета. Эти режимы заменяют цвета вашего сайта определяемой пользователем палитрой для текста, фона, ссылок и кнопок.

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

<form>
  <legend> Choose a theme: </legend>
  <label>
    <input type="radio" class="forced-colors:appearance-auto appearance-none" />
    <p class="forced-colors:block hidden">
      Cyan
    </p>
    <div class="forced-colors:hidden h-6 w-6 rounded-full bg-cyan-200 ..."></div>
    <div class="forced-colors:hidden h-6 w-6 rounded-full bg-cyan-500 ..."></div>
  </label>
  <!-- ... -->
</form>

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

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

Используйте модификаторы 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>

​Поддерживает правила

Используйте модификатор 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:

/** @type {import('tailwindcss').Config} */
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:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

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

<table>
  <thead>
    <tr>
      <th
        aria-sort="ascending"
        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
      >
        Invoice #
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

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

<table>
  <thead>
    <tr>
    <th aria-sort="ascending" class="group">
      Invoice #
      <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg>
    </th>
    <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

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

Используйте модификатор 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:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
}

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

<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</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>
<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">
      Почему они называют его Овальтином?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>Кружка круглая. Баночка круглая. Они должны называть это Roundtine.</p>
    </div>
  </details>
</div>

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

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

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

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

<ul role="list">
  {#each items as item}
    <li class="[&:nth-child(3)]:underline">{item}</li>
  {/each}
</ul>

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

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

<ul role="list">
  {#each items as item}
    <li class="lg:[&:nth-child(3)]:hover:underline">{item}</li>
  {/each}
</ul>

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

<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p>
  <ul>
    <li>
      <p>Lorem ipsum...</p>
    </li>
    <!-- ... -->
  </ul>
</div>

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

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

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

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

<button type="button" class="[@media(any-hover:hover){&:hover}]:opacity-100">
  <!-- ... -->
</button>

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

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

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 плагин:

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

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

<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 по умолчанию.

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

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

​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>
</nav>

​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>
</nav>

​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 ..." />