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

Поскольку 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 postcss-import

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

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

/* components.css */

.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

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

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

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

/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

/* components/card.css */
.card {
  @apply p-4 bg-white shadow rounded;
}

Скорее всего, вы столкнетесь с такой ситуацией в Вашем основном файле 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, такой как @apply и @screen.

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

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

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

npm install postcss-nesting

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

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

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

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('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 autoprefixer

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

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

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

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

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

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

Для наиболее согласованной разработки рекомендуется использовать исключительно PostCSS.

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

Sass

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

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

Less

При использовании Tailwind с Less вы не можете вложить директиву Tailwind @screen.

.card {
  @apply rounded-none;

  @screen sm {
    @apply rounded-lg;
  }
}

Вместо этого используйте обычный медиа-запрос вместе с функцией theme() для ссылки на размеры вашего экрана или просто не вкладывайте свои директивы @screen.

.card {
  @apply rounded-none;
}
@screen sm {
  .card {
    @apply rounded-lg;
  }
}

Stylus

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

@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 (как и Less).

.card {
  border-radius: 0;

  @screen sm {
    border-radius: theme('borderRadius.lg');
  }
}

Вместо этого используйте обычный медиа-запрос вместе с функцией theme() для ссылки на размеры Вашего экрана или просто не вкладывайте свои директивы @screen.