How to Set Up Tailwind with PurgeCSS and PostCSS

In this blog post, I will explain how to set up your workflow to trim the Tailwind CSS using PurgeCSS and a simple PostCSS setup. This setup does not involve webpack and can be used with any kind of project.

To start, you need to install Tailwind using npm or yarn:

npm init -y
npm install tailwindcss

Next, create a configuration file by running this command:

npx tailwind init

This will create a tailwind.config.js file in the root of your project with the basic Tailwind configuration.

Now, you need to configure PostCSS to make sure Tailwind runs. Open your postcss.config.js file (create one if it doesn’t exist) and add the following code:

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

Make sure you have also installed Autoprefixer by running npm install autoprefixer.

Next, create a CSS file, such as tailwind.css, and add the following lines:

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

Now, open your package.json file and add a build:css command to the scripts section:

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

To build Tailwind, run the command npm run build:css. The resulting CSS file will be located in static/dist/tailwind.css (you can change the location in the above command).

If you want to automatically regenerate the CSS whenever there is a file change, install the watch npm package:

npm install watch

Then, add a watch script to your package.json file:

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

Now, running npm run watch will watch the layouts folder and trigger the build:css command upon every change.

To trim the file size of the resulting CSS file, you can use PurgeCSS and cssnano. Install these utilities by running:

npm install cssnano
npm install @fullhuman/postcss-purgecss

Next, add the following code to your postcss.config.js file:

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

If you want to avoid too much processing during development, you can modify the postcss.config.js file as follows:

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

By following these steps, you can set up Tailwind with PurgeCSS and PostCSS in your project. Enjoy using Tailwind’s utility-based framework to create stylish and efficient CSS!