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

Директивы

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

@tailwind

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

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;

@layer

Используйте директиву @layer чтобы указать «контейнер», к которому относится набор пользовательских стилей. Допустимые слои — 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 удалены по умолчанию, чтобы избежать проблем со специфичностью:

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

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

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

/* Output */
.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 {
    /* Won't work because this file and main.css are processed separately */
    @apply card;
  }
</style>

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

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

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

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, является относительным по отношению к этому файлу CSS и будет иметь приоритет над путём, определённым в вашей конфигурации PostCSS или в командной строке Tailwind CLI.

Обратите внимание, что если вы используете 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) {
  /* ... */
}