Как генерировать все классы в Tailwind CSS

Этот пост был первоначально опубликован на Red Pixel Themes.

Когда в Tailwind еще не было JIT-движка, фреймворк должен был генерировать все классы при разработке и удалять только неиспользуемые CSS на производстве. Это то, что мы называли очисткой.

Сегодня нам это уже не нужно, поскольку JIT-движок выводит именно тот CSS, который вам нужен, и ничего больше.

Но для некоторых случаев, например, для того, чтобы не использовать процесс сборки, вы можете захотеть сгенерировать ВСЕ классы в одном CSS-файле.

Использование safelist.

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

Теперь, это не будет работать из коробки для того, что нам нужно, но классная вещь в safelist заключается в том, что он также принимает регулярное выражение (или Regex).

С помощью этого мы можем использовать следующую конфигурацию и использовать Regex, который выводит ВСЕ классы:

// Tailwind Config
module.exports = {
  safelist: [
    {
      pattern: /./, // the "." means "everything"
    },
  ],
  theme: {}
}

Я использую 14-дюймовый Macbook Pro с процессором M1 Pro, и когда я тестировал это локально, компиляция заняла ~2 минуты, а результирующий файл был почти 7 МБ, что довольно много, если вы спросите меня.

Следует помнить, что этот метод не генерирует классы с вариантами (например, lg:text-blue-500 или hover:hidden). Для этого нужно использовать свойство variants внутри объекта safelist.

Конечный результат будет выглядеть следующим образом:

// Tailwind Config
module.exports = {
  safelist: [
    {
      pattern: /./,
      variants: ['md', 'lg', 'xl'], // you can add your variants here
    },
  ],
  theme: {}
}

На компиляцию приведенного выше кода ушло целых 18 минут, а результирующий файл получился размером почти 29 МБ, так что используйте его на свой страх и риск 😅.

Вот альтернатива

Как видите, использование CSS-файла со всеми классами Tailwind может оказаться непрактичным в зависимости от того, что вы хотите сделать.

Для случая, который я упомянул в начале (нежелание использовать процесс сборки), возможной альтернативой может быть использование Tailwind CDN. Вы просто вставляете тег script в свою разметку и начинаете кодировать! Вы даже можете настроить параметры для него через объект tailwind.config, а также добавить официальные плагины, такие как typography и forms.

Вот и все на этом! Я хотел поблагодарить StevenGFX за готовое решение для этого поста и надеюсь, что вы узнали, как использовать свойство safelist для генерации всех классов Tailwind CSS, которые вы хотите. Также обратите внимание на вариант CDN, если вы просто хотите избежать процесса сборки и сразу приступить к кодированию.