Я давно слежу за Tailwind CSS, библиотекой служебных классов, написанной Адамом Уотаном в сотрудничестве с Джонатаном Рейнинком, Дэвидом Хемфиллом и Стивом Шогером, и его поток ярких обзоров трудно игнорировать.

Я, как и многие другие, когда впервые увидел подход к утилите first, он мне не понравился, HTML, заваленный классами, выглядел сбивающим с толку и, казалось, противоречил всему, что я когда-либо узнал в разработке CSS о разделении стиля и структуры. При этом Tailwind продолжал меня заинтриговывать, и при поддержке таких людей, как Тейлор Отвелл, которые отстаивали его после использования на Laravel Vapor, мой интерес только усилился.

Поэтому, когда я начал работать над новым проектом Laravel с открытым исходным кодом, я решил, что это момент, когда я собираюсь окунуться в Tailwind CSS. Использование служебных классов для проекта с открытым исходным кодом, основанного на компонентах, имело смысл, компоненты могли быть небольшими, чтобы избежать загроможденных файлов, и это означало, что любой мог внести свой вклад в проект, не беспокоясь о соблюдении конкретных соглашений об именах проекта.

Одна из проблем, которая изначально беспокоила меня по поводу Tailwind CSS, заключалась в загрузке большого количества неиспользуемых служебных классов в мой CSS. Конечно, мои опасения были необоснованными, введите PurgeCSS. PurgeCSS, если никто не сталкивался с этим, сканирует все ваши исходные файлы на наличие классов CSS и удаляет все неиспользуемые классы из вашего скомпилированного файла CSS.

Документация Tailwind CSS очень подробна, и, конечно же, есть документация как для Laravel Mix, так и для использования PurgeCSS, однако не было документации (насколько мне известно) об их совместном использовании. Итак, вот простое руководство по использованию двух технологий вместе, которое может оказаться полезным.

Сначала установите Tailwind в свой проект Laravel, используя следующую команду:

npm install tailwindcss

И добавьте помощников Tailwind в файл app.scss:

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */
@tailwind  utilities;

Создайте файл конфигурации Tailwind CSS, запустив:

npx tailwind init

Затем вам нужно установить PurgeCSS для смеси Laravel:

npm install laravel-mix-purgecss --save-dev

Затем вам нужно будет отредактировать файл webpack.mix.js, например:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

//Javascript
mix.js('resources/js/app.js', 'public/js');
//CSS
mix.sass('resources/sass/app.scss', 'public/css')
.options({
    processCssUrls: false,
    postCss: [ tailwindcss('./tailwind.config.js') ]
})
.purgeCss({
    enabled: mix.inProduction(),
    folders: ['src', 'templates'],
    extensions: ['html', 'js', 'php', 'vue'],
});

Теперь мы настроены на использование PurgeCSS с Tailwind в Laravel с использованием Laravel Mix. Чтобы проверить настройку, попробуйте запустить:

npm run production

Примечание. PurgeCSS не запускается в режиме разработки.

Я также хотел бы упомянуть пару полезных плагинов Tailwind CSS VS Code, которые могут вам пригодиться:

Headwind - Самоуверенный сортировщик классов для Tailwind CSS от Райана Хейборна.

Tailwind CSS IntelliSense - завершение имени класса CSS Tailwind от Брэда Корнса

Синтаксис Tailwind Sass - подсветка синтаксиса Tailwind для Sass от Maciej adoś