In December 2021, Tailwind CSS released v3 and it was a HUGE upgrade. In terms of the utility framework semantic, the upgrade included incremental improvements; but, in terms of the framework tooling, the upgrade revamped the developer experience.
Just to name a few of the amazing tools that now empower Tailwind:
Standalone CLI
Now, it is possible to compile the styles with a simple command line. For instance:
npx tailwindcss -i ./src/styles.css -o ./dist/main.css
--watch
It is a nice addition for quick projects. In most projects, it is better to keep using PostCSS and everything else.
Just-in-Time, all the time
Until JIT, Tailwind v1 and v2 were limited due to the exponential growth of the combinatory styling. You could add colors, text sizes, fonts, and variants; but you had to keep an eye on the raw stylesheet size while you were developing. The final stylesheet was tiny (a few kb) in comparison with the development stylesheet (several MBs).
Now, JIT has been released on Tailwind v3 and it optimizes the stylesheet "on-the-fly". This improvement opens a new door for the framework and now it can grow without limits:
- The variants' limitations are gone (you can apply variants to all selectors. For instance: group-hover:text-slate-900)
- The default palette has more colors
- There are more shadows
- There are new modifiers (For instance, RTL and LTR modifiers: ltr:ml-3 rtl:mr-3)
To Sum Up
It is nice to see how Tailwind CSS is reaching new highs and you can design instantly with the utility framework overcoming the limitations of the previous versions. To test the waters, I'm upgrading my Tailwind CSS theme for Joomla, modernizing my blog style, and publishing the template here: https://github.com/anibalsanchez/XT-Tailwind-for-Joomla/releases/tag/7.0.0
Read more https://blog.anibalhsanchez.com/en/blogging/81-tailwind-css-v3-for-joomla-4-is-here.html
