What’s new in Tailwind CSS v3.0

Introduction

Tailwind 3.0 features incredible performance gain and a host of new, exciting features.

With this release, Tailwind remediates some of the pains of previous versions such as restricted color support and the limitations of Tailwind’s design constraints.

However, in version 3.0, Tailwind CSS makes the new just-in-time (JIT) engine the default engine and only mode. This enables it to ship out of the box with support for more colors, including five shades of gray and arbitrary properties. Consequently, this enables developers to apply styles using arbitrary values and properties that are not defined in the Tailwind design constraints.

In this article, we will learn about each v3.0 feature.

Let’s get started in the next section.

New features

Below are some of the new additions to Tailwind 3.0:

Just-in-time, all the time

Tailwind 3.0 replaces the classic Tailwind engine with the new JIT engine, and this gives version 3.0 a huge performance boost and unlocks several exciting new features such as lightning-fast build times, stackable variants, arbitrary value support, and more out of the box.

Every color out of the box

In previous versions, Tailwind shipped with a limited set of colors because colors were the main contributor to huge file sizes. However, this is not an issue anymore in version 3.0 thanks to the new JIT engine.

Tailwind v3.0 ships with twenty-two colors, including all of the extended palette colors like cyan, rose, fuchsia, lime, and five different shades of gray.

Colored box shadows

Tailwind 3.0 adds utility classes for controlling the color of box shadows, and this can be useful for creating glows and reflection effects.

To change the box shadow, we 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}.

Consider the code below:

<div class="min-h-screen grid place-items-center">
  <div class="space-x-8">
    <button 
      class="px-8 py-3 rounded-full bg-fuchsia-500 text-white font-semibold 
        shadow-xl shadow-fuchsia-500/30">
          Subscribe
    </button>
    <button 
      class="px-8 py-3 rounded-full bg-indigo-500 text-white font-semibold 
        shadow-xl shadow-indigo-500/30">
          Subscribe
    </button>
    <button class="px-8 py-3 rounded-full bg-pink-500 text-white font-semibold 
      shadow-xl shadow-pink-500/30">
        Subscribe
    </button>
  </div>
</div>

Play with the code here.

Scroll snap API

Tailwind version 3.0 offers a robust scroll snap API with a comprehensive list of utility classes for the CSS scroll snap module, thus giving more flexibility and power to developers to create better scrolling and scroll snap experiences.

Some of the utilities contained in the new scroll API are:

• Scroll behavior — contains utility classes for controlling the scroll behavior of an element
• Scroll margin — contains utility classes for controlling the scroll offset around items in a scroll container
• Scroll padding — contains utility classes for controlling the scroll offset of an element within a scroll container
• Scroll snap align — contains utility classes for controlling the scroll snap alignment of an element
• Scroll snap stop — contains utility classes to determine if you can skip past possible scroll positions
• Scroll snap type — contains utility classes to determine how strictly snap points are enforced in a snap container

Multi-column layout

columns are useful CSS shorthand, and Tailwind adds support for them in 3.0. They can be useful for styling footers as seen in the code below:

<footer class="columns-1 sm:columns-3 ...">
  ...
</footer>

Also in version 3.0, Tailwind adds the break-after utility classes used to control how a column or page should break after an element.

Native form control styling

Tailwind adds the accent-color property and the file modifier to simplify styling native forms.

The accent color can be used when styling checkboxes as seen below:

...
<label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
  <input type="checkbox" class="accent-blue-500" checked/>
  <span>I have read and agree to your terms and conditions</span>
</label>
...

While the file modifier is useful for styling file input as seen below:

...
<label class="block">
  <span class="sr-only">Choose profile photo</span>
  <input type="file" class="block w-full text-sm text-gray-500
    file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm 
    file:font-semibold file:bg-violet-50 file:text-violet-700 
    hover:file:bg-violet-100 "/>
</label>
...

Print modifier

This feature adds a print modifier to enable us to add styles that determine how our documents look when printed.

Consider the code below:

...
<section>
  <header class="print:hidden">
    <!-- Some naviagation markup -->
  </header>
  ...
</section>
...

The code above would hide the navigation when the site is printed. And using the print modifier would wrap our code inside a [print] media query as seen below:

@media print { ... }

Thus the print modifier above would be:

@media print {
  .print\:hidden {
    display: none;
  }
}

Modern aspect ratio API

Tailwind adds support for the aspect-ratio property as its browser support rises. The aspect-ratio property sets a default aspect ratio for a box used to calculate auto sizes and some other layout functions.

Consider the code below:

<iframe 
  class="w-full aspect-video hover:aspect-square" 
    src="https://www.youtube.com/..."
>
</iframe>

Tailwind only gives us three possible aspect ratio values: aspect-auto, aspect-square, and aspect-video. However, we can leverage the new arbitrary property feature to apply any arbitrary value we want. We will see this in action when we talk about arbitrary properties.

Arbitrary properties

Arbitrary properties are inline styles on steroids. They add flexibility to Tailwind CSS by giving developers the ability to use any CSS property even if it is not defined in Tailwind CSS.

In lower Tailwind versions, we could use arbitrary values in just-in-time mode by using Tailwind’s bracket notation:

<!-- Colors -->
<button class="bg-[#1da1f1]">Share on Twitter</button>

However, since JIT mode is now the default mode in Tailwind v3, we can use arbitrary properties not defined in the Tailwind design constraint simply by using Tailwind’s bracket notation.

Consider the code below:

<article>
  <img class="w-64 float-left aspect-[1/1] lg:aspect-[1/2] 
    rounded-lg shadow-lg object-cover object-center mb-0 mr-6 
    [clip-path:circle(70%_at_20%_30%)] 
    [shape-outside:circle(70%_at_20%_30%)]"

    src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80"

    alt="John Doe Avatar"
  />

  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

</article>

Also, in the above code, we used Tailwind’s bracket notation to add arbitrary clip-path and shape-outside values. These were not supported in Tailwind before, and you can see the code in action here.

Arbitrary values can work with CSS variables and they can be combined with any Tailwind CSS modifier. We refactor our example above to be more responsive as seen below:

<article>
  <img class="w-64 float-left aspect-[1/1] lg:aspect-[1/2]
  rounded-lg shadow-lg object-cover object-center mb-0 mr-6
  [clip-path:circle(70%_at_20%_30%)]
  [shape-outside:circle(70%_at_20%_30%)]
  md:[clip-path:polygon(0%_0%,100%_0%,75%_100%,0%_100%)]
  md:[shape-outside:polygon(0%_0%,100%_0%,75%_100%,0%_100%)]"

  src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80"

  alt="John Doe Avatar"
  />

  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>

Note arbitrary properties do not have spaces, hence we used underscores in the code above. You can see this in action here.

Fancy underline styles

Tailwind 3.0 adds new text decoration utility classes: text decoration color, text decoration style, text decoration thickness, and text underline offset. These are used to extend the decoration of a text by styling the underline as seen below:

<p>
  I’m John Doe, a full-stack developer, writer, and instructor.
  <a href="#" class="underline decoration-blue-500 decoration-4">My Company, Inc</a>. 
  When not coding, I like to 
  <a href="#" class="underline decoration-orange-500 decoration-dotted decoration-2">watch Basket ball</a>
  or watch 
  <a href="#" class="underline decoration-green-500 decoration-wavy decoration-2">Soccer
  </a>
  fights.
</p>

You can see this in action here.

RTL and LTR modifiers

This feature adds two new modifiers, rtl and ltr, which add experimental support for multi-directional (left-to-right and right-to-left) layouts. These modifiers are only useful when building sites that support multi-directional layout, and it is best practice to explicitly set the direction when using them:

<html dir="ltr">
  <!-- ... -->
</html>

Portrait and landscape modifiers

Tailwind v3 adds two new modifiers, portrait and landscape, that enable us to conditionally apply styles to our sites depending on the orientation of the viewport:

<section>
  <article class="portrait:hidden">
    ...
  </article>

  <article class="landscape:hidden">
   ...
  </article>
</section>

Play CDN

This is an innovative Tailwind CDN that enables us to use all the awesome features of Tailwind 3.0 via a CDN link:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Demo</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>

  <body>
    ...
  </body>
</html>

This is not production-ready but it is a great way to build Tailwind projects in development. You can learn more about the CDN here.

Conclusion

Tailwind CSS v3 is a game-changer that ships with several amazing new features such as arbitrary properties and extended color support — twenty-two colors out of the box.

These are possible because Tailwind 3.0 uses the new JIT engine as the default engine. Other interesting features are a comprehensive scroll snap API, modern aspect ratio API, and fancy underline styles.

We have already covered these features in detail in this article, and by going through this article you should be ready to start applying Tailwind 3.0 styles to your project.