Our 3 favorite additions to Tailwind CSS 3.0
At Spartner we have used Tailwind CSS since the very first alpha release. Last week they released a new major version: 3.0.0. We’ll explain our favorite new features and why we are looking forward to using them!
JIT mode as default
One of the big new things in 3.0 is the stable release of the JIT (just-in-time) mode which was in beta during the 2.0 version.
The JIT mode comes with a lot of advantages:
- Extremely fast build times. On some of our bigger projects at Spartner the building time could take up to 45s, however with the JIT mode enabled this goes down to <1s.
- Generating arbitrary styles without custom CSS. This is very useful for the situation you need a very specific value (like a sidebar width or an absolute element position).
- All variants are enabled. No more enabling of variants per component in the config file. Variants like
:hovercan now be used out of the box on every utility. - Smaller CSS files. The JIT mode only generates the CSS classes that you need. This has two advantages: smaller files (faster loading in local development) and development en production builds are identical.
Color shadows
Most Tailwind utilities can be used in a composable way. For shadows this wasn’t possible yet and you would have to create a custom shadow like shadow-lg-blue. Now the shadow color can be modified by adding a utility like `shadow-blue-500/50`.
<button class=”bg-blue-500 shadow-lg shadow-blue-500/50 ...>Tailwind achieves this by using CSS variables in the shadow utilities:
.shadow-lg {
— tw-shadow-colored: 0 10px 15px -3px var( — tw-shadow-color),0 4px 6px -4px var( — tw-shadow-color);
}The color utility sets this color variable:
.shadow-indigo-500\/50 {
— tw-shadow-color: rgb(99 102 241/0.5);
}The new shadow utilities will give us even more possibilities at creating great looking designs.
Print variant
At Spartner, we develop custom CRM and ERP software and some of our clients still hold value in printing physical copies of their customer’s data.
The new print variant allows to specify styles that will only be loaded when dealing with print. In classic CSS all these styles would have to be wrapped inside a media query; Tailwind does that for you. This can be helpful for hiding specific elements when printing.
<article class="print:hidden">Upgrading
Upgrading from 2.1 is very easy, especially if you are already using the JIT mode in beta. Their upgrade guide can be found here: https://tailwindcss.com/docs/upgrade-guide
We are looking forward to what a bright Tailwind CSS future holds for us!
Maatwebsite is now Spartner. New name, same dedication to the open source community. Read more at https://spartner.software/maatwebsite-is-now-spartner.
Do you need help with TailwindCSS or do you need help building a Laravel application? We are there to help you on a commercial basis. Contact us via info@spartner.nl or via phone +31 (0)10 744 9312 to discuss the possibilities.
