Поскольку 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 где угодно, кроме самого верха файла.

Не будет работать, операторы `@import` должны быть на первом месте

/* components.css */

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

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

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

Не будет работать, операторы `@import` должны быть на первом месте

@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".

Импортируйте предоставленные файлы CSS

@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: {
    '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.

Не будет работать, сначала обрабатывается Sass

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

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

Sass

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

Не будет работать, на что жалуется Sass !important

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

Используйте интерполяцию как обходной путь

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

Less

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

Не будет работать, Less не понимает, что это медиа-запрос

.card {
  @apply rounded-none;

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

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

Используйте обычный медиа-запрос и theme()

.card {
  @apply rounded-none;

  @media (min-width: theme('screens.sm')) {
    @apply rounded-lg;
  }
}

Используйте директиву @screen на верхнем уровне

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

Stylus

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

Не сработает, Stylus жалуется на @apply

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

Используйте @css, чтобы избежать обработки как Stylus

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

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

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

Используйте theme() вместо @apply

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

Вдобавок к этому Stylus не поддерживает вложение директивы @screen (как и Less).

Не сработает, Stylus не понимает, что это медиа-запрос

.card {
  border-radius: 0;

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

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

Используйте обычный медиа-запрос и theme()

.card {
  border-radius: 0;

  @media (min-width: theme('screens.sm')) {
    border-radius: theme('borderRadius.lg');
  }
}

Используйте директиву @screen на верхнем уровне

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