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.
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!
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á