Just in mode (JIT) and POSTCSS setup not compile in Gatsby

I want too just in time mode in my tailwind, gatsby setup with postcss.

When I run the gatsby develop it will give me following error.

Do I need seperate webpack file? I am very new in this so dont have any idea.


Generating development JavaScript bundle failed

Module build failed (from ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js):

TypeError: Cannot read property 'enabled' of undefined```

Below are my config files.

`package.json`
```"@fontsource/poppins": "^4.5.0",
"@tailwindcss/aspect-ratio": "^0.3.0",
"autoprefixer": "^10.4.0",
"gatsby": "^4.2.0",
"gatsby-plugin-image": "^2.2.0",
"gatsby-plugin-postcss": "^5.2.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-scroll-reveal": "0.0.7",
"gatsby-plugin-sharp": "^4.2.0",
"gatsby-source-filesystem": "^4.2.0",
"gatsby-transformer-sharp": "^4.2.0",
"postcss": "^8.3.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-html-parser": "^2.0.2",
"react-rotating-text": "^1.4.1",
"tailwindcss": "^2.2.19"```


Postcss.config.js

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

Solution

I'm not sure if it's a typo from the question but Postcss.config.js should be named postcss.config.js.

I'd recommend using:

npx tailwindcss init -p

To create directly postcss.config.js and tailwind.config.js respectively.

Your final configuration files should look like:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And:

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

npm commands:

"build": "npm run build:css && gatsby build",
"develop": "npm run watch:css & gatsby develop",

Assuming you've set up the gatsby-plugin-postcss in the gatsby-config.js.

Do I need seperate webpack file?

Gatsby ships it's own webpack configuration so but if you need to customize it, you can add your own to override the default one. In this case (for using Tailwind + PostCSS) is not required at all.

There's a lack of details on the implementation but I'd suggest the following readings: