Romych: Новая страница: «← Tailwind Репозитории: * https://gitlab.com/zina.design/tailwind-performance — Tailwind CSS + PurgeCSS + postcss-extract-media-query * https…»

2020-11-19T08:30:55Z

Новая страница: «← Tailwind Репозитории: * https://gitlab.com/zina.design/tailwind-performance — Tailwind CSS + PurgeCSS + postcss-extract-media-query * https…»

Нова сторінка

← [[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

== postcss-extract-media-query ==

Разбивка CSS на отдельные файлы по Media Query.

Полный CSS файл Tailwind большой — около 3 мегабайт, и поиск в нем всех Media Query и разбивка на части занимает много времени. Если предварительно очистить его от неиспользуемых классов с помощью <code>PurgeCSS</code>, разбивка будет быстрее.

Поэтому делаем эти два процесса — <code>PurgeCSS</code> и <code>postcss-extract-media-query</code> — отдельным процессом, частью подготовки сайта к деплою.

Репозиторий: https://gitlab.com/zina.design/zina-tailwind (в ветке dev)

[https://github.com/tailwindlabs/tailwindcss/discussions/1697 Tailwind 1.4 - Setup with PurgeCSS [Guide]]

1. Run <code>npm install --save-dev cross-env</code>

2. In the <code>package.json</code> file add a production row like this:

<source lang="javascript">
"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"
},
</source>

3. <code>npm run production</code>

Tailwind и postcss-extract-media-query - Історія редагувань

Romych: Новая страница: «← Tailwind Репозитории: * https://gitlab.com/zina.design/tailwind-performance — Tailwind CSS + PurgeCSS + postcss-extract-media-query * https…»