The "Cannot read properties of undefined (reading 'blocklist')" error in Tailwind CSS (PostCSS build) usually happens due to one of the following issues:
Possible Causes & Fixes
1. Tailwind CSS Version Mismatch If you are using an outdated version of Tailwind CSS or PostCSS, update them to the latest stable versions:```bash npm update tailwindcss postcss autoprefixer ```or
```bash npm install tailwindcss@latest postcss@latest autoprefixer@latest ```2. Incorrect `tailwind.config.js` Configuration Your `tailwind.config.js` might have an outdated or misconfigured structure. Ensure it's correctly formatted:
```js
module.exports = {
content: ["./src/**/*.{html,js,ts,jsx,tsx}"], // Define your template paths correctly
theme: {
extend: {},
},
plugins: [],
};
```
-> Remove old properties like `purge` (deprecated in Tailwind 3.x).
-> Ensure `content` is properly set.
3. Corrupt `node_modules` or `package-lock.json`
Try deleting and reinstalling dependencies:
```bash rm -rf node_modules package-lock.json npm install ```4. Ensure PostCSS is Installed & Configured Make sure `postcss.config.js` is properly set up:
```js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
5. Check for Conflicting Dependencies
Run:
```bash npm list tailwindcss postcss autoprefixer ```If multiple versions appear, you may need to reinstall the correct versions.
Final Steps:-
1. Run a clean build after fixing the config:```bash npm run build ```2. Check logs for further errors by running:
```bash npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ```If the issue persists, let me know what Node.js & Tailwind versions you're using.