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

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

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

<button class="bg-sky-500 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:

<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 [email protected]
Cody Fisher Product Directives Officer [email protected]
Leonard Krasner Senior Designer [email protected]
Emily Selman VP, Hardware Engineering [email protected]
Anna Roberts Chief Strategy Officer [email protected]
<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}:

Published status
<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})

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

Categories

Sales
Marketing
SEO
Analytics
Design
Strategy
Security
Growth
Mobile
UX/UI
<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-* для стилизации элемента на основе состояния или содержимого его потомков.

Payment method
<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-* для стилизации целевого элемента.

Today
<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="[email protected]" />
</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:

Ингредиенты

  • 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 для переопределения темного режима:

Light mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Dark mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

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

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

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

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

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

Попробуйте эмулировать `forced-colors: active` в инструментах разработчика, чтобы увидеть изменения

Choose a theme:
<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:

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:

МодификаторCSS
aria-checked&[aria-checked=“true”]
aria-disabled&[aria-disabled=“true”]
aria-expanded&[aria-expanded=“true”]
aria-hidden&[aria-hidden=“true”]
aria-pressed&[aria-pressed=“true”]
aria-readonly&[aria-readonly=“true”]
aria-required&[aria-required=“true”]
aria-selected&[aria-selected=“true”]

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

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

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

Invoice # Client Amount
#100 Pendant Publishing $2,000.00
#101 Kruger Industrial Smoothing $545.00
#102 J. Peterman $10,000.25
<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:

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>

Обратите внимание, что модификатор 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.

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

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

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
*& > *
has&:has
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
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)
min-[]@media (min-width: )
max-sm@media not all and (min-width: 640px)
max-md@media not all and (min-width: 768px)
max-lg@media not all and (min-width: 1024px)
max-xl@media not all and (min-width: 1280px)
max-2xl@media not all and (min-width: 1536px)
max-[]@media (max-width: )
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
supports-[]@supports ()
aria-checked&[aria-checked=“true”]
aria-disabled&[aria-disabled=“true”]
aria-expanded&[aria-expanded=“true”]
aria-hidden&[aria-hidden=“true”]
aria-pressed&[aria-pressed=“true”]
aria-readonly&[aria-readonly=“true”]
aria-required&[aria-required=“true”]
aria-selected&[aria-selected=“true”]
aria-[]&[aria-]
data-[]&[data-]
rtl[dir=“rtl”] &
ltr[dir=“ltr”] &
open&[open]

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

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

autofill (:autofill)

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

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

read-only (:read-only)

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

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