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 :
node_modulesGot 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: first-react-app@0.1.0
npm ERR! Found: react-scripts@5.0.0
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/craco@6.4.3
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.
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
I replaced postcss with postOptions in carco.config.js and it's working !
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
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.