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

​Директивы

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

​@tailwind

Используйте директиву @tailwind, чтобы вставить стили Tailwind base, components, utilities и variants в ваш CSS.

/**
 * Это вводит базовые стили Tailwind и любые базовые стили,
 * зарегистрированные плагинами.
 */
@tailwind base;

/**
 * Это внедряет базовые классы компонентов Tailwind и любые классы компонентов,
 * зарегистрированные плагинами.
 */
@tailwind components;

/**
 * Это внедряет служебные классы Tailwind и любые служебные классы,
 * зарегистрированные плагинами.
 */
@tailwind utilities;

/**
 * Используйте эту директиву для управления тем, где Tailwind вводит наведение, фокус,
 * отзывчивый, темный режим и другие варианты каждого класса.
 *
 * Если опущено, Tailwind по умолчанию добавит эти классы в самый конец
 * Вашей таблицы стилей.
 */
@tailwind variants;

​@layer

Используйте директиву @layerчтобы указать Tailwind, к какому “bucket” принадлежит набор пользовательских стилей. Допустимые уровни base, components и utilities.

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

Tailwind автоматически переместит CSS внутри любой директивы @layer в то же место, что и соответствующее правило @tailwind, поэтому вам не нужно беспокоиться о создании CSS в определенном порядке, чтобы избежать проблем со специфичностью.

Любой пользовательский CSS, добавленный к слою, будет включен в окончательную сборку только в том случае, если этот CSS действительно используется в вашем HTML, как и все классы, встроенные в Tailwind по умолчанию.

Обертывание любого пользовательского CSS с помощью @layer также позволяет использовать модификаторы с этими правилами, такие как hover: и focus:, или адаптивные модификаторы, такие как md: и lg:.

​@apply

Используйте @apply, чтобы встроить любые существующие служебные классы в свой собственный CSS.

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

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

Любые правила, заключенные с помощью @apply, будут иметь !important удалено по умолчанию, чтобы избежать проблем со специфичностью:

/* Ввод */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Вывод */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

Если вы хотите применить к существующему классу @apply и сделать его !important, просто добавьте !important в конец объявления:

/* Ввод */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Вывод */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

Обратите внимание, что если вы используете Sass/SCSS, вам нужно использовать функцию интерполяции Sass, чтобы это работало:

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

​Использование @apply с покомпонентным CSS

Компонентные инфраструктуры, такие как Vue и Svelte, поддерживают добавление стилей для каждого компонента в блоке <style>, который находится в каждом файле компонента.

Если вы попытаетесь применить @apply к пользовательскому классу, который вы определили в своем глобальном CSS, в одном из этих блоков <style> для каждого компонента, вы получите сообщение об ошибке, что класс не существует:

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

@layer components {
  .card {
    background-color: theme(colors.white);
    border-radius: theme(borderRadius.lg);
    padding: theme(spacing.6);
    box-shadow: theme(boxShadow.xl);
  }
}

<div>
  <slot></slot>
</div>

<style>
  div {
    /* Не будет работать, потому что этот файл и main.css обрабатываются отдельно */
    @apply card;
  }
</style>

Это связано с тем, что внутренние фреймворки, такие как Vue и Svelte, обрабатывают каждый блок <style> независимо и запускают цепочку плагинов PostCSS для каждого из них изолированно.

Это означает, что если у вас есть 10 компонентов, каждый из которых имеет блок <style>, Tailwind запускается 10 отдельных раз, и каждый запуск не имеет сведений о других запусках. Из-за этого, когда вы пытаетесь применить @apply card в Card.svelte, это не удается, потому что Tailwind не знает, что класс card существует, поскольку Svelte обработал Card.svelte и main.css в целом изоляция друг от друга.

Решение этой проблемы состоит в том, чтобы определить любые пользовательские стили, которые вы хотите использовать @apply в своих компонентах, используя вместо этого систему плагинов instead:

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}

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

Честно говоря, лучшее решение - вообще не делать таких странных вещей. Используйте утилиты Tailwind непосредственно в своей разметке так, как они предназначены для использования, и не злоупотребляйте функцией @apply для подобных действий, и вы получите гораздо лучший опыт.

​@config

Используйте директиву @config, чтобы указать, какой файл конфигурации Tailwind должен использовать при компиляции этого файла CSS. Это полезно для проектов, которым необходимо использовать разные файлы конфигурации для разных точек входа CSS.

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

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

Путь, указанный в директиве @config, относится к этому файлу CSS и будет иметь приоритет над путем, определенным в вашей конфигурации PostCSS или в интерфейсе командной строки Tailwind.

Обратите внимание: если вы используете postcss-import, ваши операторы @import должны идти перед @config, чтобы все работало правильно, поскольку postcss-import строго следует спецификации CSS, которая требует @import, чтобы они предшествовали любым другим правилам в файле.

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

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

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

​Функции

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

​theme()

Используйте функцию theme() для доступа к Вашим значениям конфигурации Tailwind, используя точечную нотацию.

.content-area {
  height: calc(100vh - theme(spacing.12));
}

Если вам нужно получить доступ к значению, содержащему точку (например, к значению 2.5 в шкале интервалов), вы можете использовать запись в квадратных скобках:

.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}

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

.btn-blue {
  background-color: theme(colors.blue-500);
}

.btn-blue {
  background-color: theme(colors.blue.500);
}

Чтобы настроить непрозрачность цвета, полученного с помощью theme, используйте косую черту, за которой следует значение непрозрачности, которое вы хотите использовать:

.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}

​screen()

Функция screen позволяет вам создавать медиа-запросы, которые ссылаются на ваши контрольные точки по имени, вместо того, чтобы дублировать их значения в вашем собственном CSS.

@media screen(sm) {
  /* ... */
}

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

@media (min-width: 640px) {
  /* ... */
}