I was trying to use the newly introduced arbitrary value in TailwindCSS yesterday and it occured to me that I needed to upgrade from version 2 to the latest version. I religiously followed the upgrade guide and everything seemed working until I realized the scale and rotate in my site have stopped working. I battled it over the night with no luck.
I have another NextJS project that originally uses TailwindCSS version 3, I tried scale and rotate on it and it worked fine. The version is a bit lower (3.X.4) compared to the current version (3.X.23), so I downgraded to that exact version, yet the scaling and rotating wouldn't work.
I'm currently frustrated as I don't know what I didn't do or what I did wrongly. Can someone please rescue?
Haha!!! I figured it!
Actually, I was using custom classes instead of individual utility classes which means I don't necessarily need the import the @tailwind base into my globals.css.
I realized that whenever I import the @tailwind base, the scale and rotate start working, but some of my other stylings are disorganized (because the base styles over-write my styles). So, to make it work I read here https://tailwindcss.com/docs/preflight that one can disable the preset from the tailwind.config.js file by adding
corePlugins: {
preflight: false,
},