Configuring PurgeCSS when using TailwindCSS

Phoenix Forum Questions / Help
, ,
1

I’ve added TailwindCSS to my Phoenix project. I’m running into a problem configuring PurgeCSS to remove unused CSS. I followed the instructions at https://tailwindcss.com/docs/controlling-file-size to add my template files to my tailwind.config.js file:

module.exports = {
  purge: [
    "./js/**/*.js",
    "../lib/ex338_web/**/*.html",
    "../lib/ex338_web/**/*.ex",
    "../lib/ex338_web/**/*.eex",
    "../lib/ex338_web/**/*.leex",
    "../lib/ex338_web/**/*.md"
  ],
  theme: {
    extend: {}
  },
  variants: {
    margin: ["responsive", "first", "last"],
    padding: ["responsive", "first", "last"]
  },
  plugins: [require("@tailwindcss/ui"), require("@tailwindcss/typography")]
};

When I run npm run deploy from my assets folder, I get the following warning in my output:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  ../css/app.css (3.54 MiB)
  app.js (660 KiB)

Here is the full repo: https://github.com/axelclark/ex338

Does anyone have any ideas about how to config PurgeCSS properly with TailwindCSS in my Phoenix project?

1 Like
2

I was able to resolve the problem by updating the scripts in my package.json to add the NODE_ENV environmental variable:

  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode production",
    "watch": "NODE_ENV=development webpack --mode development --watch-stdin"
  },

From the TailwindCSS docs regarding PurgeCSS Basic Usage:

Now whenever you compile your CSS with NODE_ENV set to production, Tailwind will automatically purge unused styles from your CSS.

3 Likes