Функции и директивы

Директивы

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

@import

Используйте директиву @import для встраивания CSS файлов, включая сам Tailwind:

@import "tailwindcss";

@theme

Используйте директиву @theme для определения пользовательских дизайн-токенов вашего проекта, таких как шрифты, цвета и контрольной точки:

@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 120rem;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

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

@source

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

@source "../node_modules/@my-company/ui-lib";

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

@utility

Используйте директиву @utility для добавления пользовательских утилит в ваш проект, которые работают с вариантами типа hover, focus и lg:

@utility tab-4 {  tab-size: 4;}

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

@variant

Используйте директиву @variant для применения варианта Tailwind к стилям в вашем CSS:

.my-element {  background: white;  @variant dark {    background: black;  }}

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

@custom-variant

Используйте директиву @custom-variant для добавления пользовательского варианта в ваш проект:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

Это позволяет вам писать утилиты theme-midnight:bg-black и theme-midnight:text-white.

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

@apply

Используйте директиву @apply для встраивания любых существующих классов утилит в ваш собственный пользовательский CSS:

.select2-dropdown {  @apply rounded-b-lg shadow-md;}.select2-search {  @apply rounded border border-gray-300;}.select2-results__group {  @apply text-lg font-bold text-gray-900;}

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

@reference

Если вы хотите использовать @apply или @variant в блоке <style> компонента Vue или Svelte, или в CSS модулях, вам нужно будет импортировать переменные темы, пользовательские утилиты и пользовательские варианты, чтобы сделать эти значения доступными в этом контексте.

Чтобы сделать это без дублирования CSS в выводе, используйте директиву @reference для импорта основного таблицы стилей для справки без фактического включения стилей:

<template>  <h1>Привет мир!</h1></template><style>  @reference "../../app.css";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

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

<template>  <h1>Привет мир!</h1></template><style>  @reference "tailwindcss";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

Функции

Tailwind предоставляет следующие функции времени сборки для упрощения работы с цветами и шкалой отступов.

--alpha()

Используйте функцию --alpha() для настройки прозрачности цвета:

.my-element {  color: --alpha(var(--color-lime-300) / 50%);}

.my-element {  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);}

--spacing()

Используйте функцию --spacing() для генерации значения отступа на основе вашей темы:

.my-element {  margin: --spacing(4);}

.my-element {  margin: calc(var(--spacing) * 4);}

Это также может быть полезно в произвольных значениях, особенно в сочетании с calc():

<div class="py-[calc(--spacing(4)-1px)]">  <!-- ... --></div>

Совместимость

Следующие директивы и функции существуют исключительно для совместимости с Tailwind CSS v3.x.

Директивы @config и @plugin могут использоваться в сочетании с @theme, @utility и другими функциями, управляемыми CSS. Это можно использовать для постепенного переноса вашей темы, пользовательской конфигурации, утилит, вариантов и пресетов в CSS. Вещи, определенные в CSS, будут объединены там, где это возможно, а в противном случае будут иметь приоритет над теми, что определены в конфигурациях, пресетах и плагинах.

@config

Используйте директиву @config для загрузки устаревшего файла конфигурации на основе JavaScript:

@config "../../tailwind.config.js";

Параметры corePlugins, safelist и separator из конфигурации на основе JavaScript не поддерживаются в v4.0. Для внесения утилит в безопасный список в v4 используйте @source inline().

@plugin

Используйте директиву @plugin для загрузки устаревшего плагина на основе JavaScript:

@plugin "@tailwindcss/typography";

Директива @plugin принимает либо имя пакета, либо локальный путь.

theme()

Используйте функцию theme() для доступа к значениям темы Tailwind с помощью точечной нотации:

.my-element {  margin: theme(spacing.12);}

Эта функция устарела, и мы рекомендуем использовать CSS переменные темы вместо нее.