Configuring PurgeCSS when using TailwindCSS

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 to add my template files to my tailwind.config.js file:

module.exports = {
  purge: [
  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.
  ../css/app.css (3.54 MiB)
  app.js (660 KiB)

Here is the full repo:

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

1 Like

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.