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

@tailwind

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

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

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

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

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

@apply

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

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

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

Обратите внимание, что классы применяются в зависимости от их местоположения в исходном CSS, а не в порядке их перечисления после директивы @apply. Это сделано для того, чтобы поведение, которое вы получаете при извлечении списка классов с помощью @apply, соответствует тому, как ведут себя эти классы, когда они перечислены непосредственно в Вашем HTML.

/* Ввод */
.btn {
  @apply py-2 p-4;
}

/* Вывод */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

Если вам нужен детальный контроль над порядком применения классов, используйте несколько операторов @apply:

/* Ввод */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Вывод */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

Вы также можете смешивать объявления @apply с обычными объявлениями CSS:

/* Ввод */
.btn {
  transform: translateY(-1px);
  @apply bg-black;
}

/* Вывод */
.btn {
  background-color: #000;
  transform: translateY(-1px);
}

Любые правила, заключенные с помощью @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};
}

@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 {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

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

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

@variants

Вы можете сгенерировать responsive, hover, focus, active и другие варианты Ваших собственных утилит, заключив их определения в директиву @variants.

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

Это сгенерирует следующий CSS:

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

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

Поэтому, если вы хотите, чтобы утилиты фокусировки имели приоритет, например, над утилитами зависания, убедитесь, что фокус появляется после наведения в списке:

/* Ввод */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Вывод */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

В правиле @variants поддерживает все значения, которые поддерживаются в разделе variants Вашего файла конфигурации, а также любые пользовательские варианты, добавленные через плагины.

@responsive

Вы можете сгенерировать отзывчивые варианты Ваших собственных классов, заключив их определения в директиву @responsive:

@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

Это ярлык для написания @variants responsive { ... }, который также работает.

Используя контрольные точки по умолчанию, это сгенерирует следующие классы:

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

Адаптивные варианты будут добавлены к существующим медиа-запросам Tailwind в конце Вашей таблицы стилей. Это гарантирует, что классы с отзывчивым префиксом всегда побеждают неотзывчивые классы, нацеленные на одно и то же свойство CSS.

@screen

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

Например, предположим, что у вас есть контрольная точка sm на 640px и вам нужно написать некоторый собственный CSS, который ссылается на эту контрольную точку.

Вместо того, чтобы писать необработанный медиа-запрос, который дублирует это значение следующим образом:

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

…вы можете использовать директиву @screen и ссылаться на контрольную точку по имени:

@screen sm {
  /* ... */
}

screen()

Функция screen принимает экранное имя, например md, и генерирует соответствующее выражение мультимедийной функции:

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

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

Это может быть полезно, когда вы используете Tailwind с другими инструментами CSS, которые плохо обрабатывают директиву @screen. Например, postcss-nesting не понимает @screen, но понимает @media, поэтому использование @media вместе с функцией screen() ведет себя более корректно.

theme()

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

Это может быть полезной альтернативой @apply, когда вы хотите ссылаться на значение из конфигурации Вашей темы только для части объявления:

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

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

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

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