Tailwind 1.4 - Setup with PurgeCSS [Guide]

[jenstornell]

Here a little guide (or a note to my future self).

Step 1 - Setup Tailwind and PurgeCSS

1. Follow https://youtu.be/21HuwjmuS7A to setup Tailwind.
2. Add PurgeCSS syntax to the tailwind.config.js like this: https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

Step 2 - Environmental setup

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"
  },

Step 3 - Run Tailwind with PurgeCSS

npm run production

Additional notes

1. Make sure you add the purge configuration in tailwind.config.js and NOT postcss.config.js. I pick the wrong file sometimes.
2. cross-env allows for NODE_ENV to be run "inline", in the package.json script call.
3. I named my PurgeCSS to tailwind.min.css, but it's not actually minified, only smaller. Call it something else if you like.

[spxw]

Thanks for this compilation. however i'm wondering what is the difference here?

in postcss.config.js and NOT postcss.config.js

[lihbr]

I think he meant tailwind.config.js and NOT postcss.config.js (?)

[jenstornell]

@spxw Yes, it should be tailwind.config.js like @lihbr said. I've updated my post Sorry about that!

[n1ghtmare]

Do you know how you can add minification to the build setup?

I tried adding cssnano to the postcss.config.js, but when I run:

NODE_ENV=production tailwindcss build src/css/tailwind.css -o src/css/tailwind.generated.css

The output has the unused classes removed, however it's not minified. I'm guessing I need to set it up in a different way.

This is my postcss.config.js:

module.exports = {
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
        require("cssnano")({
            preset: "default",
        }),
    ],
};

And this is my tailwind.config.js:

module.exports = {
    purge: ["./src/**/*.jsx", "./src/**/*.js"],
    theme: {
        extend: {
            screens: {
                dark: { raw: "(prefers-color-scheme: dark)" },
                // => @media (prefers-color-scheme: dark) { ... }
            },
            spacing: {
                "72": "18rem",
                "84": "21rem",
                "96": "24rem",
            },
        },
    },
    variants: {},
    plugins: [],
};

Any ideas?

[estevanmaito]

You're not using postcss to build

This is what my build script looks like env NODE_ENV=production postcss tailwind.css -o tailwind.min.css

Your should be NODE_ENV=production postcss src/css/tailwind.css -o src/css/tailwind.generated.css

Make sure that you have postcss-cli installed

[hz-tyfoon]

1. Follow https://youtu.be/21HuwjmuS7A to setup Tailwind.

minor update for updated versions of tailwind: U must install "postcss" too as your dependency before running "npm run build" as shown here: https://youtu.be/21HuwjmuS7A?t=279

So, first run "npm install postcss" then follow along with that video.