How to set up Tailwind with PurgeCSS and PostCSS

How to set up a workflow to trim Tailwind CSS with PurgeCSS and simple PostCSS settings (Webpack not involved)

I recently started moving my blog CSS toTail wind.

Tailwind is an interesting framework because it does not provide a set of Bootstrap or other widgets, but providesPublic utilities.

I find that it resonates a lot with the way HTML is used.

I introduced my usageVue's tail windIn the last article, but there is no suitable build tool yet, it may be difficult to set the correct location correctly, I decided to write this blog post, even just to make me remember later

In this article, I explained how to combine Tailwind withanyA kind of project.

Install Tailwind

The first step is to install Tailwind using npm or yarn:

npm init -y
npm install tailwindcss

Create a configuration file

Next, use this command to create a configuration file:

npx tailwind init

This will create atailwind.config.jsAdd the basic Tailwind configuration to the files in the project root directory.

Configure PostCSS

Now you need to adjustCSSConfigure to ensure Tailwind is running. Add to:

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

Give youpostcss.config.js. If it does not exist, create one.

For convenience, I also added autoprefixer, you may need it. Install withnpm install autoprefixer.

Oh, also make sure you have PostCSS installed (npm install -g postcss-cli)

Create Tailwind CSS file

Now, create a CSS file in the desired location, for exampletailwind.cssAnd add

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

Create build command

Open yours nowpackage.jsonFile, if not, please add a script section:

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

Build tail wind

Now run from the command linenpm run build:cssThe final CSS file will be constructed.

The result file is instatic/dist/tailwind.css(You can change the position in the command above).

Automatically regenerate CSS after changing files

Every time I change the theme HTML (stored inlayoutsFolder), I want to regenerate the CSS and trigger the clearing and shrinking that I set.

How can this be done?

installationwatchnpm package:

npm install watch

And addwatchScript for youpackage.jsonfile. You already havebuild:cssFrom before, we only added a script to monitor the layouts folder and runbuild:cssEvery time you change:

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

Run nownpm run watchAnd you should go well!

Trim file size

If you check, the result file is very large. Even if you don’t use any Tailwind class in HTML, all frames will be included by default because this istailwind.jsfile.

They decided to include everything to avoid people missing anything. This is a design choice. We need nowDelete stuff, It turns out that we can use purgecss to delete all unused CSS classes.

I also want to remove all comments from the CSS and make it as small as possible.csnanoIs what we are looking for.

We can automate these things! First, install these utilities:

npm install cssnano
npm install @fullhuman/postcss-purgecss

Then we add it to our PostCSS configuration filepostcss.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) || []
})
]
}

During development, avoid excessive processing

why? Every step you add will slow down the feedback cycle in the development process. I use this configuration to only add prefixes in production and remove comments:

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) || []
})
]
}

Download mine for freeCSS Manual