CODEWITHSUNDEEP
reactjstailwind-css
principiorum
principiorum

Reputation: 616

Using tailwindcss with React, size not decreased after purging

I'm tried to set up tailwind with ejected create-react-app. I'm successful to make it works but failed to purge the size. here is my setup

./src/assets/styles/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

postcss.config.js

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

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.js"],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

package.json

"scripts": {
    "start": "node scripts/start.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css -w",
    "build": "node scripts/build.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css"
}

index.js

import "./assets/styles/main.css";
// ...

I tried to create a component like this and its work

<div className="w-64 h-64 bg-red-200">hai</div>

but when I build, even I have given a path to purge at the config, the size not decreasing. It constant 143kb whether I add the purge path or not. i also have tried manual purge like this at postcss.config.js but no work

// postcss.config.js
const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: [
    "./src/**/*.js"
    // etc.
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: (content) => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  }
});

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

whats wrong with my setup?

Upvotes: 3

Views: 4438

Answers (2)

Ivan Milovac
Ivan Milovac

Reputation: 43

I also have the same problem. This helped me:

https://tailwindcss.com/docs/optimizing-for-production#enabling-manually

I have to manually add this code in my tailwind.config.js file:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],
  },
  // ...
}

I hope it will be helpful.

Upvotes: 2

Mark
Mark

Reputation: 7625

With the latest versions, starting at 1.4.0, you don't need to manually configure PurgeCSS.

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

//tailwind.config.js
module.exports = {
  purge: [
      './src/**/*.js'
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

// package.json
  "scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "NODE_ENV=production npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss tailwind.css -o src/main.css"
  },

Note the NODE_ENV=production.

The documentation says:

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

Upvotes: 4

Related Questions