Этот пост был первоначально опубликован на 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, если вы просто хотите избежать процесса сборки и сразу приступить к кодированию.