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.

CodePudding user response：

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.

CodePudding user response：

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