Skip to content

What's new in Tailwind CSS 3?

🔗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 and scroll-auto
  • Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-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 and snap-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 and snap-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>

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!


This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.co

You might also like

ReactJS

Taming Forms With react-hook-form

Javascript

Getting Started with RxJS

General

Semantic HTML: Why it matters and top tips on how to apply it

ReactJS

React.js 17: No New Features and New JSX Transform