TypeError: match.loader.options.plugins is not a function

Question

I am trying to use tailwindCSS in a ReactJS app

These are the scripts commands in package.json file

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

This is my craco.config.js

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

When I am used npm run start command, I am facing this error

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
    at Array.forEach (<anonymous>)
    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5

Things that I have tried :

1. Reinstall node_modules

Got this error, when I tried to do that

$ npm i @craco/craco
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Answer 1

Have you solved your problem? There is a solution to the problem. https://github.com/facebook/create-react-app/issues/11777

try to replace "postcss" with "postcssOptions" in craco config I had the same problem , this method works for me.

Answer 2

craco config is no longer needed in tailwind docs however in the solutions mentioned if you replace

postcss with postOptions on craco.config.js it will work too

Answer 3

I replaced postcss with postOptions in carco.config.js and it's working !

Answer 4

It looks like the Tailwind configuration from CRACO is not needed anymore.

https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

Look at Tailwind 3.0 install steps: https://tailwindcss.com/docs/guides/create-react-app

Answer 5

[WARNING] The most upvoted answer that suggesting changing the postcss to postcssOptions may not what you expect.

try to replace "postcss" with "postcssOptions" in craco config

Currently, craco doesn't support postcssOptions, so changing the key just make craco ignore your configurations.

patching craco would be better if you need custom configs.