Using tailwindcss with React, size not decreased after purging - reactjs

Question

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?

Answer 1

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.

Answer 2

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.