In this post I’m going to talk how I solved the issue I encounter installing TailwindCSS 2.0 in create-react-app.
Context
I had my website running with tailwind v1.x and wanted to upgrade it to the latest version. I had also not configured correctly PostCSS or tailwind config files and the theme customization wasn’t working 😣
To make it work, I tried to follow the instructions from tailwind configuration page https://tailwindcss.com/docs/guides/create-react-app Then tried to re install it in my current project but, I couldn't make it to work. The solution? I created a new project from scratch to see if I could understand what was failing.
The Issue
When I created this new project following the instructions from tailwind page, create-react-app tailwind configuration seemed to work until the step npx install tailwindcss
There, I saw this message in the console.
It was complaining that it could not find the autoprefixer package. But it was clearly there. It was installed just few moments before. 🤔
The Solution
First, I uninstalled the packages.
npm uninstall tailwindcss postcss autoprefixer
Then, I installed all the packages to the latest version
npm install tailwindcss@latest postcss@latest autoprefixer@latest
(even though create-react-app will not work with PostCSS8) it let me run npx tailwindcss installation command.
Even though PostCSS8 won't work with create-react-app, I tried anyway 🤓 Of course, after npm start the console gave me the expected error, PostCSS8 not supported.
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Then again, I uninstalled the 3 packages necessary for tailwind to work.
npm uninstall tailwindcss postcss autoprefixer
To finish, I reinstall tailwind PostCSS and autoprefixer packages to the version recommended in the guide.
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
And bam! 💥 Everything worked, I had tailwind 2.0 and the theme configuration worked as a bliss.
Conclusion
I'm writing this post just in case someone else encounter this issue because when I looked it up online, I couldn't find any info about it.
Maybe it’s due to my set up. Running WSL2 in Windows 🤷🏻♂
And that's it, I am happy I have the project running on the latest version and the config file working.
If it has helped you, please let me know.
If you want more info about tailwind or react, do follow my Twitter account as I will be posting more content about it.
Thanks for reading! 💜 See you soon!