Tailwind css does not reduce file size after purge - css

Question

i have a basic html file (index.html), my project structure is like below :
index.html
tailwind.config.js
postcss.js
tailwind.css
dist.css
and here contents for each files
module.exports = {
purge: {
enabled:true,
content:['./*.html', './**/*.html'],
layers: ['components']
},
theme: {
extend: {
fontSize:{
'small' : '.6rem',
// Or with a default line-height as well
'3xl': ['2.5rem', {
lineHeight: '50px',
}],
'6xl': ['3.70rem', {
lineHeight: '60px',
}],
},
colors:{
transparent: 'transparent',
current: 'currentColor',
orange:{
DEFAULT: '#F47521'
}
},
screens: {
'sm': '640px',
'md': '760px',
'custom' : '980px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1600px',
'xxl' : '1700px'
}
}
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'visited'],
},
plugins: [
({addUtilities}) => {
const utils = {
'.translate-x-half': {
transform: 'translateX(50%)',
},
};
addUtilities(utils, ['responsive'])
}
]
};
the postcss file
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
and my package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "my theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "NODE_ENV=production npx tailwindcss-cli#latest build tailwind.css -o dist.css",
"build:css": "postcss tailwind.css -o dist.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.8",
"tailwindcss": "^2.0.4"
},
"dependencies": {
"cssnano": "^4.1.10",
"postcss-cli": "^8.3.1"
}
}
when building with : npm run build, tailwind build the project but the dist.css size remains 5,7MB
What i'm doing wrong here?
thank you

Answer 1

You have purge configured to apply to the 'components' layer.
Tailwind has three layers: 'base', 'components', and 'utilities'. Components is the smallest of the three so its impact on the resulting filesize will be fairly minimal. You're hitting 5.7MB because by far the largest layer, 'utilities', is being ignored.
Update your purge configuration to apply to utilities too. Unless there's a good reason to be selective with layers, you probably want to drop any specificity and allow it to apply to all layers.
Furthermore, if you leave out enabled, it will be handled automatically based on your NODE_ENV setting.
https://tailwindcss.com/docs/optimizing-for-production#purging-specific-layers