Update to tailwind 3 with ionic 5

Ionic Framework Ionic React
1

Hello there,
do there is any possibility to upgrade from tailwind 2 to 3
I’m currently with ionic 5 react

so after update here is some part from my package.json:

“devDependencies”: {
“@capacitor/cli”: “^3.3.1”,
“@graphql-codegen/cli”: “^2.2.2”,
“@graphql-codegen/import-types-preset”: “^2.1.7”,
“@graphql-codegen/typescript”: “^2.3.1”,
“@graphql-codegen/typescript-operations”: “^2.2.0”,
“@graphql-codegen/typescript-react-apollo”: “^3.2.1”,
“@types/react-instantsearch-dom”: “^6.12.1”,
“autoprefixer”: “^10.4.2”,
“node-sass”: “^6.0.1”,
“postcss”: “^8.4.5”,
“tailwindcss”: “^3.0.13”
},

got this warning:

/src/theme/global.css (./node_modules/css-loader/dist/cjs.js??ref–5-oneOf-4-1!./node_modules/react-scripts/node_modules/postcss-loader/src??postcss!./src/theme/global.css)
[npm] Error: PostCSS plugin tailwindcss requires PostCSS 8.
[npm] Migration guide for end-users:
[npm] PostCSS 8 for end users · postcss/postcss Wiki · GitHub

I try to update postcss loader but same here

any idea ?

2

I am not sure PostCSS 8 is compatible with Ionic 5. I know when I installed Tailwind v2, I had to downgrade to PostCSS 7 and use Tailwind’s special PostCSS v7 package. Tailwind v3 now only supports PostCSS 8. Can you upgrade to Ionic 6?

3

Well I try to update to ionic 6 but I got black screen so I hoped some possibility with postcss but seems difficult

edit: Ok I managed to get ionic 6 but the error is still there
even I delete node_module and package-lock.json

4

well apparently postCss 8 only support create-react-app v5

so ionic 5 use craco with create-react v4 but the good news is that an update is coming :slight_smile:

just need to wait

the problem with the upgrade from ionic 5 to ionic 6 is that it doesn’t remove craco

I try with fresh new app with ionic 6 and tailwind 3 seems to work and apparently craco seems not to be here anymore.