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.