Tailwind и postcss-extract-media-query
← Tailwind
Репозитории:
- https://gitlab.com/zina.design/tailwind-performance — Tailwind CSS + PurgeCSS + postcss-extract-media-query
- https://gitlab.com/zina.design/hugo-tailwind — минимальная конфигурация Hugo с Tailwind CSS + PurgeCSS + postcss-extract-media-query
Разбивка CSS на отдельные файлы по Media Query.
Полный CSS файл Tailwind большой — около 3 мегабайт, и поиск в нем всех Media Query и разбивка на части занимает много времени. Если предварительно очистить его от неиспользуемых классов с помощью PurgeCSS, разбивка будет быстрее.
Поэтому делаем эти два процесса — PurgeCSS и postcss-extract-media-query — отдельным процессом, частью подготовки сайта к деплою.
Репозиторий: https://gitlab.com/zina.design/zina-tailwind (в ветке dev)
Tailwind 1.4 - Setup with PurgeCSS [Guide]
1. Run npm install --save-dev cross-env
2. In the package.json file add a production row like this:
"scripts": {
"build": "postcss assets/css/src/tailwind.css -o assets/css/dist/tailwind.css",
"production": "cross-env NODE_ENV=production postcss assets/css/src/tailwind.css -o assets/css/dist/tailwind.min.css"
},
3. npm run production