Introduction
Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files.
Tailwind CSS v3
Tailwind CSS v3 was released at the end of 2021, and it has even more cool features.
Just-In-Time Engine
"Just-in-time", or @tailwindcss/jit
, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB.
The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server.
Scroll Snap API
Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for:
- Scroll behavior: we have to classes
scroll-smooth
andscroll-auto
- Scroll margin: use the
scroll-{margin class}
likescroll-m-2
orscroll-my-4
- Scroll padding: exactly like scroll margin it’s
scroll-{padding class}
- Scroll snap align: it’s used to snap every element to a specific direction on scroll like
span-start
,snap-end
andsnap-center
- Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are
snap-always
andsnap-normal
. - scroll snap type: it used to control how strictly snap points are enforced in a snap container like
snap-none
,snap-x
,snap-y
,snap-both
etc
More Colors
The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors!
Colored Box Shadows
This is a cool feature you can use the shadow utility shadow-{color}
. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity}
like:
<div class=”shadow-xl shadow-rose-500/30”>
Some content
</div>
Print Modifier
It’s a new feature that allows you to control how the page will look when people print it like:
<div class="print:hidden">
This will be hidden when you print the page!
</div>
<div class="hidden print:block">
This will be hidden in the browser but will be visible when you print the page!
</div>
Colored Underline Styles
Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color}
is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy}
used to change the text underline’s style.
Multi-Column Layout
Tailwind CSS 3 supports colums
. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer:
<footer class="columns-1 md:columns-4 ...">
...
</footer>
Modern Aspect Ratio API
Use the aspect-{ratio}
utilities to set the desired aspect ratio of an element like aspect-auto
, aspect-square
, or aspect-video
.
RTL and LTR Modifiers
Also, we have two new modifiers ltr
and rtl
to provider good user experience in multidirectional websites. You can use them, like:
<div class=”ltr:bg-red”>
…
</div>
<div class=”rtl:mr-8”>
…
</div>
Portrait and Landscape Modifiers
Also, we have new modifiers that give us more control over the page, like:
<div class=”portrait:hidden”>
Hello from landscape!
</div>
<div class=”landscape:hidden”>
Please rotate your device!
</div>
Wrap Up
Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!