Tailwind и postcss-extract-media-query

Матеріал з Wiki.Zina
Перейти до навігації Перейти до пошуку

← Tailwind

Репозитории:

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

Отримано з https://mediawiki.zina.run/index.php?title=Tailwind_и_postcss-extract-media-query&oldid=886