I created a project via create-react-app 4.0.3 which uses tailwindcss 2. I just tried to upgrade the project to tailwindcss 3, but quickly ran into troubles, since tailwindcss 3 relies on Post CSS 8, which is not supported by create-react-app 4.0.3 , so I also needed to upgrade to create-react-app 5.0.0
The official Create-React-App documentation says "In most cases bumping the react-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes."
The official Tailwind Upgrade Guide says "update Tailwind, as well as PostCSS and autoprefixer, using npm" and adds to that some minor changes in tailwind.config.js
I followed this steps and ended up with a huge error message when trying to run npm run start
I am thinking that in the end it might be easier to set up the project from a fresh 5.0.0 create-react-app installation, where I install tailwind 3 on top instead of trying to repair all the issues that were caused by the upgrade.
However, before I do this I wanted to ask: What is the recommended solution for upgrading from tailwind 2 to 3 AND upgrade from create-react-app from 4.0.3 to 5.0.0 (since my understanding is that you need to do both to make tailwind work). How did other people solve the issues laid out above?
First you need to update react-scripts to version 5.0.0
Then uninstall craco
Finally update tailwind with the command
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
You can also follow official guide at https://tailwindcss.com/docs/upgrade-guide to update the new color names and update the tailwind.config.js file
Now yo can run the command npm run start to see the changes and in the console you can see the new build process