Использование с препроцессорами

Поскольку Tailwind - это плагин PostCSS, ничто не мешает вам использовать его с Sass, Less, Stylus или другими препроцессорами, как и с другими плагинами PostCSS, такими как Autoprefixer.

Важно отметить, что вам не нужно использовать препроцессор с Tailwind — в любом случае вы обычно пишете очень мало CSS в проекте Tailwind, поэтому использование препроцессора не так выгодно, как в проекте, где вы пишете много пользовательского CSS.

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

---

​Использование PostCSS в качестве препроцессора

Если вы используете Tailwind для нового проекта и вам не нужно интегрировать его с какими-либо существующими таблицами стилей Sass/Less/Stylus, вам следует подумать о том, чтобы полагаться на другие плагины PostCSS для добавления функций препроцессора, которые вы используете вместо использования отдельного препроцессор.

У этого есть несколько преимуществ:

• Ваши сборки будут быстрее. Поскольку ваш CSS не нужно анализировать и обрабатывать несколькими инструментами, ваш CSS будет компилироваться намного быстрее, используя только PostCSS.
• Никаких причуд или обходных путей. Поскольку Tailwind добавляет некоторые новые нестандартные ключевые слова в CSS (например, @tailwind, @apply, theme() и т.д.), вам часто приходится писать свой CSS раздражающими, не интуитивными способами заставить препроцессор выдать ожидаемый результат. Работа исключительно с PostCSS позволяет избежать этого.

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

​Импорт во время сборки

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

Канонический плагин для обработки этого с помощью PostCSS - это postcss-import.

Чтобы использовать его, установите плагин через npm:

npm install -D postcss-import

Затем добавьте его как самый первый плагин в Вашу конфигурацию PostCSS:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

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

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* Не будет работать */
@import "./components/card";

Самое простое решение этой проблемы - никогда не смешивать обычный CSS и импорт в одном файле. Вместо этого создайте один основной файл точки входа для импорта и храните весь ваш фактический CSS в отдельных файлах.

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

Скорее всего, вы столкнетесь с такой ситуацией в Вашем основном файле CSS, который включает Ваши объявления @tailwind.

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

Вы можете решить эту проблему, создав отдельные файлы для каждого объявления @tailwind, а затем импортируя эти файлы в вашу основную таблицу стилей. Чтобы упростить это, мы предоставляем отдельные файлы для каждого объявления @tailwind из коробки, которые вы можете импортировать непосредственно из node_modules.

Плагин postcss-import достаточно умен, чтобы автоматически искать файлы в папке node_modules, поэтому вам не нужно указывать полный путь - например, достаточно "tailwindcss/base".

@import "tailwindcss/base";
@import "./custom-base-styles.css";

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

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

​Вложенность

Чтобы добавить поддержку вложенных объявлений, мы рекомендуем наш встроенный плагин tailwindcss/nesting, который представляет собой плагин PostCSS, который служит оберткой для postcss-nested или postcss-nesting и действует как уровень совместимости, чтобы убедиться, что выбранный вами плагин вложения правильно понимает пользовательский синтаксис Tailwind.

Он включен непосредственно в сам пакет tailwindcss, поэтому для его использования все, что вам нужно сделать, это добавить его в свою конфигурацию PostCSS где-нибудь перед Tailwind:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

По умолчанию он использует подключаемый модуль postcss-nested под капотом, который использует синтаксис, подобный Sass, и является подключаемым модулем, обеспечивающим поддержку вложенности в Tailwind API плагинов CSS.

Если вы предпочитаете использовать postcss-nesting (который основан на стандарте спецификации CSS Nesting), сначала установите плагин:

npm install -D postcss-nesting

Затем передайте сам плагин в качестве аргумента для tailwindcss/nesting в вашей конфигурации PostCSS:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

Это также может быть полезно, если по какой-либо причине вам нужно использовать очень специфическую версию postcss-nested и вы хотите переопределить версию, которую мы связываем с самим tailwindcss/nesting.

Обратите внимание: если вы используете postcss-preset-env в своем проекте, вы должны обязательно отключите вложенность и позвольте tailwindcss/nesting сделать это за вас:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

​Переменные

В наши дни переменные CSS (официально известные как настраиваемые свойства) имеют действительно хорошую поддержку браузера, поэтому вам вообще не нужен препроцессор для использования переменных.

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

Мы широко используем переменные CSS в самом Tailwind, поэтому, если вы можете использовать Tailwind, вы можете использовать собственные переменные CSS.

Вы также можете обнаружить, что большинство вещей, для которых вы использовали переменные в прошлом, можно заменить функцией Tailwind theme(), которая дает вам доступ ко всем вашим токенам дизайна из вашего файла tailwind.config.js прямо в вашем CSS:

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

Узнайте больше о функции theme() в нашей документации по функциям и директивам.

​Префиксы вендора

Для автоматического управления префиксами поставщиков в вашем CSS следует использовать Autoprefixer.

Чтобы использовать его, установите его через npm:

npm install -D autoprefixer

Затем добавьте его в самый конец списка плагинов в конфигурации PostCSS:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

---

​Использование Sass, Less или Stylus

Для наилучшего опыта разработки мы настоятельно рекомендуем вам использовать исключительно PostCSS и не использовать препроцессоры, такие как Sass или Less, в ваших проектах Tailwind.

Чтобы использовать Tailwind с инструментом предварительной обработки, таким как Sass, Less или Stylus, вам необходимо добавить в проект дополнительный этап сборки, который позволит вам запускать предварительно обработанный CSS через PostCSS. Если вы используете Autoprefixer в своем проекте, у вас уже есть что-то подобное.

Смотрите нашу документацию по установке Tailwind как плагина PostCSS, чтобы узнать больше об интеграции Tailwind в существующий процесс сборки.

Самое важное, что нужно понимать при использовании Tailwind с препроцессором, - это то, что препроцессоры, такие как Sass, Less и Stylus, запускаются отдельно перед Tailwind. Это означает, что вы не можете передать вывод функции Tailwind theme(), например, в цветовую функцию Sass, потому что функция theme() фактически не оценивается, пока ваш Sass не будет скомпилирован в CSS и передан в PostCSS.

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

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

​Sass

При использовании Tailwind с Sass использование !important с @apply требует, чтобы вы использовали интерполяцию для правильной компиляции.

.alert {
  @apply bg-red-500 !important;
}

.alert {
  @apply bg-red-500 #{!important};
}

In addition to this, Sass has trouble with Tailwind’s screen() function unless wrapped in parentheses.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media (screen(md)) {
  .foo {
    color: blue;
  }
}

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

​Stylus

При использовании Tailwind со Stylus вы не можете использовать функцию @apply в Tailwind без обертывания всего правила CSS в @css, чтобы Stylus воспринимал его как буквальный CSS.

.card {
  @apply rounded-lg bg-white p-4
}

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

Однако это требует значительных затрат, а именно: вы не можете использовать какие-либо функции стилуса внутри блока @css.

Другой вариант - использовать функцию theme() вместо @apply и записать фактические свойства CSS в длинной форме:

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

В дополнение к этому, у Stylus возникают проблемы с функцией screen() в Tailwind, если вы не используете интерполяцию и не заключаете ее в круглые скобки.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

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