Estaba usando Tailwind v2 y cuando lo estoy actualizando a v3 me da el error Postcss 8 (Error: el complemento PostCSS tailwindcss requiere PostCSS 8) . Intenté resolver este error pero no tuve éxito. ¿Hay alguna manera de que pueda usar Tailwind Cli en React Js? Captura de pantalla de error
"name": "frontend", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.4.0", "@formatjs/intl-pluralrules": "^4.1.5", "@formatjs/intl-relativetimeformat": "^9.3.2", "@headlessui/react": "^1.4.2", "@heroicons/react": "^1.0.5", "@manaflair/redux-batch": "^1.0.0", "@reduxjs/toolkit": "^1.6.2", "@tailwindcss/forms": "^0.4.0", "@tailwindcss/line-clamp": "^0.3.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-apexcharts": "^1.3.9", "react-autocomplete": "^1.8.1", "react-datepicker": "^4.5.0", "react-dom": "^17.0.2", "web-vitals": "^1.0.1", "yup": "0.29.0" }, "devDependencies": { "autoprefixer": "^10.4.2", "copyfiles": "2.1.1", "postcss": "^8.4.5", "prettier": "^1.19.1", "sass": "1.32.8", "serve": "11.2.0", "tailwindcss": "^3.0.12" }, "scripts": { "start": "craco start", "dev": "TAILWIND_MODE=watch craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }tailwindcss v3 solo es compatible con Postcss8 y solo create-react-app v5 es compatible con Postcss8 por ahora. Por lo tanto, debe actualizar la aplicación create-react-a v5. No hay necesidad de craco en create-react-app v5 también
Primero, asegúrese de pagar en una sucursal diferente o envíe su código a github antes de migrar, solo por seguridad.
1. Primero ejecute npm uninstall @craco/craco autoprefixer postcss tailwindcss
Eliminar el archivo craco.config.js
Eliminar el tailwind.config.js
Ahora solo sigue los documentos oficiales de tailwindcss
2. Ejecute npm install -D tailwindcss postcss autoprefixer
3. npx tailwindcss init -p
copie y pegue el archivo tailwind.config.js de la documentación de tailwindcss
4. npm install react-scripts@latest
5. Ahora npm start
Más tarde, pegue su tema anterior tailwind.config en el nuevo archivo tailwind.config.js.
El orden de los pasos puede o no importar, pero seguir estos pasos funcionó para mí.