I was using Tailwind v2 and when I am upgrading it to v3 it is giving me Postcss 8 Error (Error: PostCSS plugin tailwindcss requires PostCSS 8.). I tried to resolve this Error but did not succeed. Is there any way I can use Tailwind Cli in React Js. Error ScreenShoot
"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 only supports Postcss8 and only create-react-app v5 supports Postcss8 for now. So you need to upgrade the create-react-app to v5. No need for craco in create-react-app v5 as well
First make sure to checkout to different branch or push your code to github before migrating, just for safety.
1.First run npm uninstall @craco/craco autoprefixer postcss tailwindcss
Delete the craco.config.js file
Delete the tailwind.config.js
Now just follow the offical tailwindcss docs
2. Run npm install -D tailwindcss postcss autoprefixer
3. npx tailwindcss init -p
copy paste the tailwind.config.js file from tailwindcss docs
4. npm install react-scripts@latest
5. Now npm start
Later paste your previous tailwind.config theme in the new tailwind.config.js file.
The order of steps may or may not matter but following this steps worked for me.