Я давно слежу за 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ś