Содержимое

​Основы использования

​Установка содержимого псевдоэлемента

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

По умолчанию, content-none единственная доступная утилита с предварительно сконфигурированным содержимым. И хотя вы можете добавить дополнительные утилиты, настроив свою тему, обычно имеет смысл просто использовать произвольное значение.

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

Более высокое разрешение означает больше, чем просто изображение лучшего качества. Благодаря дисплею Retina 6K, <a class="text-blue-600 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> дает вам почти на 40 процентов больше площади экрана, чем дисплей 5K.Более высокое разрешение означает больше, чем просто изображение лучшего качества. Благодаря дисплею Retina 6K, <a class="text-sky-400 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> дает вам почти на 40 процентов больше площади экрана, чем дисплей 5K.

​Ссылка на значение атрибута

Эти утилиты контента даже поддерживают функции CSS, такие как функция attr(), которую вы можете использовать для ссылки на значение, хранящееся в атрибуте:

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

​Использование пробелов и подчеркиваний

Поскольку пробел обозначает конец класса в HTML, замените любые пробелы в произвольном значении подчеркиванием:

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

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

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

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:before:content-['Hovering'], чтобы применять утилиту before:content-['Hovering'] только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

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

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

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

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

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет только утилиту content-none. Вы можете настроить эти значения, отредактировав theme.content или theme.extend.content в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      content: {
        'link': 'url("/icons/link.svg")',
      },
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

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

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

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