Как настроить Tailwind с PurgeCSS и PostCSS

Как я настроил свой рабочий процесс для обрезки Tailwind CSS с помощью PurgeCSS и простой настройки PostCSS (без использования веб-пакета)

Недавно я решил переместить CSS своего блога наПопутный ветер.

Tailwind - интересный фреймворк, потому что вместо набора виджетов, таких как Bootstrap или другие, он предоставляеткоммунальные услуги.

Я считаю, что это очень перекликается с тем, как я работаю с HTML.

Я рассказал, как я используюПопутный ветер с Vueв предыдущем посте, но без инструмента для сборки, может быть трудно правильно настроить правильную настройку, и я решил написать этот пост в блоге, даже просто для того, чтобы я вспомнил позже 🙃

В этом посте я объясню, как использовать Tailwind слюбойвид проекта.

Установить Tailwind

Первый шаг - установить Tailwind, используя npm или yarn:

npm init -y
npm install tailwindcss

Создайте файл конфигурации

Затем используйте эту команду для создания файла конфигурации:

npx tailwind init

Это создастtailwind.config.jsв корне вашего проекта, добавив базовую конфигурацию Tailwind.

Настроить PostCSS

Теперь вам нужно настроитьPostCSSконфигурации, чтобы убедиться, что Tailwind работает. Добавлять:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

на вашpostcss.config.js. Создайте его, если его не существует.

Также для удобства добавил автопрефиксер, он вам наверняка понадобится. Установите его с помощьюnpm install autoprefixer.

О, также убедитесь, что вы установили PostCSS (npm install -g postcss-cli)

Создайте файл CSS Tailwind

Теперь создайте файл CSS там, где хотите, например, вtailwind.cssи добавить

@tailwind base;
@tailwind components;
@tailwind utilities;

Создайте команду сборки

Теперь откройте свойpackage.jsonфайл и добавьте раздел скриптов, если у вас его нет:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

Построить попутный ветер

Теперь из командной строки запуститеnpm run build:cssсоздаст окончательный файл CSS.

Полученный файл находится вstatic/dist/tailwind.css(вы можете изменить местоположение в приведенной выше команде).

Автоматически регенерировать CSS при изменении файла

Каждый раз, когда я что-то меняю в HTML-коде темы (хранящемся вlayoutsпапку в моем случае), я хочу регенерировать CSS и запустить очистку и минификацию, которые я настроил.

Как это сделать?

Установитеwatchпакет npm:

npm install watch

и добавитьwatchсценарий к вашемуpackage.jsonфайл. У тебя уже былоbuild:cssкак и раньше, мы просто добавляем скрипт, который следит за папкой макетов и запускаетbuild:cssпри каждом изменении:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Теперь бегиnpm run watchи вам должно быть хорошо!

Обрезать размер файла

Если вы проверите, то получится огромный файл. Даже если вы не используете какой-либо класс Tailwind в своем HTML, вся структура включена по умолчанию, потому что это конфигурация по умолчанию вtailwind.jsфайл.

Они решили включить все, чтобы люди не упускали что-то. Это выбор дизайна. Теперь нам нужноудалить вещи, и оказывается, что мы можем использовать purgecss для удаления всех неиспользуемых классов CSS.

Я также хочу удалить все комментарии из CSS и сделать его как можно меньше.cssnanoэто то, что мы ищем.

Мы можем автоматизировать это! Сначала установите эти утилиты:

npm install cssnano
npm install @fullhuman/postcss-purgecss

Затем мы добавляем это в наш файл конфигурации PostCSS.postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
cssnano({
preset: ‘default’
}),
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}

В разработке избегайте слишком большой обработки

Почему? Каждый добавляемый вами шаг замедляет цикл обратной связи при разработке. Я использую эту конфигурацию только для добавления префиксов и удаления комментариев в продакшене:

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require(‘tailwindcss’),
process.env.NODE_ENV === ‘production’ ? require(‘autoprefixer’) : null,
process.env.NODE_ENV === ‘production’
? cssnano({ preset: ‘default’ })
: null,
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}

Скачать мою бесплатнуюСправочник CSS