Estoy tratando de usar tailwindCSS en una aplicación ReactJS
Estos son los comandos de scripts en el archivo package.json
"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }
Este es mi craco.config.js
module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }
Cuando uso el comando npm run start
, me encuentro con este 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
Cosas que he probado:
node_modules
Recibí este error, cuando traté de hacer eso
$ 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 ya no es necesario en los documentos de viento de cola, sin embargo, en las soluciones mencionadas si reemplaza
postcss con postOptions en craco.config.js también funcionará
Parece que la configuración Tailwind de CRACO ya no es necesaria.
https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680
Mire los pasos de instalación de Tailwind 3.0: https://tailwindcss.com/docs/guides/create-react-app
¿Has solucionado tu problema? Hay una solución al problema. https://github.com/facebook/create-react-app/issues/11777
intente reemplazar "postcss" con "postcssOptions" en la configuración de Craco Tuve el mismo problema, este método funciona para mí.
¡ Reemplacé postcss con postOptions en carco.config.js y está funcionando!