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.

Galbraith

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.

Lizliza

Took me a week to find this. Thanks ! – Octoroon

Answer 2

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

Arondell

This answer is wrong. Using postOptions has the same effect as removing it altogether. – Kayne

Answer 3

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

Zosima

Answer 4

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

Pinup

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.

Howbeit

Answer 6

I replaced postcss with postOptions and it works for me

Pongid