A sneak peek at Tailwinds next big release - version 3.0

The first alpha release of Tailwind CSS v3.0 was released on October 1st. Let’s take a look at all the new features and improvements that Tailwind CSS V3.0 brings to the table. This article will be updated when more information is shared during the development.

Table of contents

New features coming to version 3.0

With every major Tailwind version there is a ton of new stuff to explore. Version 3 is no exception; it’s packed with new utilities, new variants and a major upgrade is coming to the Tailwind CSS CDN version.

Just-in-Time engine by default - AOT deprecated

With version 3.0 the Just-In-Time (JIT) engine is the new default engine for powering Tailwind CSS. The older Ahead of Time (AOT) mode is deprecated and can no longer be used in V3.

Guess now is a good time to start powering your current Tailwind 2.x projects by the JIT engine. This will make it a lot easier to upgrade your existing Tailwind 2.x projects to Tailwind 3.0 later this year when its officially released.

Reading the official guide to enable the JIT-Engine would be a good place to start.

CDN Version is now powered by the Just-in-Time engine

The Tailwind CDN version gets super powers in version 3. It is now supported by the JIT Engine. This means that you now have access to all the cool features that the JIT-engine brings to Tailwind when using the CDN version. This is huge for quickly prototyping and developing.

Note that I write for developing. It’s still not recommended that you use the CDN version in your production environment. Under its hood, the CDN version is using MutationObserver to add styles to your documents. This can cause problems related to FOUC (flash of unstyled content), something that you really don’t want on your production websites.

You can now try the new CDN version out, include this script tag in the head of your document and you are ready to go. Note that the final url may change in the future.

<script src="https://cdn-tailwindcss.vercel.app/"></script>

What is also new in version 3.0 is the support for first-party plugins. Plugins can be loaded automatically by adding a plugins query parameter to you script tag. Inside the query parameter you can specify which first-party plugins you want to load. In this example we load the official forms and typography plugins.

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography"></script>

To customize the default Tailwind CSS configuration, you can override it with your own tailwind config. To do this you add an extra script tag to your document and then specify the preferred overrides. In this example we extend our color pallette with a purplegreen color.

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          purplegreen: '#819239',
        },
      },
    },
  }
</script>

And it’s now even possible to process any custom CSS with Tailwinds JIT-engine. The only thing you have to do is to add a style tag with type=“text/tailwindcss” to your document. In this example we use the @apply function to apply our purplegreen color to the body of the document. If you want to read more about the configuration options, checkout the official docs.

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          purplegreen: '#819239',
        },
      },
    },
  }
</script>
<style type="text/tailwindcss">
  body {
    @apply purplegreen;
  }
</style>

It’s super cool that you can do all these things by just including the CDN version. But remember don’t use this approach in production, it’s only suitable for development.

Colored box shadows utilities

This one is more focused on designers, because it’s bringing a subtle touch to your designs. The new colored box shadows utilities allow you to fine tune the tint of your box-shadows.

To use a different tint for your box-shadows you may use the shadow utility followed by your favorite color. In this example we specify a blue tint for our box shadows. Note that you have to specify the color again when changing a shadow on a different breakpoint.

<div class="shadow-lg shadow-blue-500 md:shadow-xl md:shadow-blue-500">

Aspect-ratio utilities

Tailwind 3.0 brings new utilities classes matching browsers natively supported aspect ratios. These new classes will live along the aspect ratio plugin. By default, the following utilities classes are included.

You are also free to provide your own aspect ratios. Therefor you can use the following bracket syntax.

<img class="aspect-[4/3] ... "/>

Scroll-behavior utilities

This is a small new utility that allows you to specify the way the browser handles scrolling. This can be handy for enabling smooth scrolling between page anchors.

Text-indent utilities

The text-indent utilities allows you to set the length of an empty space (indentation) that is put before the lines of text in a block. By default, the classes generated for text-indent are coming from the default Tailwind spacing scale. This also include any negative numbers and will also work with the responsive variants.

<div class="indent-12 lg:-indent-32">.....</div>

These utilities also support arbitrary values using the scare bracket notation:

<div class="indent-[33%]">.....</div>

Touch-action utilities

With the new touch actions utilities you can set how an element’s region can be manipulated by a user using a touchscreen (like a tablet or phone). Tailwind V3 will ship with the following touch-actions utilities:

Will-change utilities

In version 3.0 you have the option to use the will-change utilities. The will-change utility hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.

By default Tailwind includes the following classes:

You may also use arbitrary values to specify the preferred preset.

<div class="will-change-[bottom,right]">.....</div>

border-x and border-y utilities

This is a small one, but will save you sometime during development. You can now write border-x-{width}, border-y-{width}, border-x-{color}, and border-y-{color} utilities to style the border on two sides of an element at the same time.

Fill and stroke utilities

Due the power of the JIT-engine you can now specify stroke and fill colors in a more compact syntax. Before version 3.0 you had to use a combination of fill-current and your desired colour, for example text-red-500. The new syntax makes it just a little easier to read and write:

<svg class="text-red-500 fill-current"><!-- the old way of doing fill colors--></svg>

<svg class="fill-red-500"><!-- the new way of doing fill colors--></svg>

Print: variant

The new print variant allows you to specify styles targeted for printing purpose. For example, you have the ability to change all the text colors to black when printing your webpages. Another common option would be to hide certain elements on your website when printing. In this example we make our text black and hide our logo when printing.

<h1 class="text-indigo-500 print:text-black">
  <!-- Text is in black when printing this page -->
</h1>

<img src="..../logo.png" class="print:hidden">
  <!-- Hide the logo when printing this page -->
</img>

File: variant

With the file variant you have the option to style the native file upload button in your browser. For example if you want to make the file upload button red you can write the following:

<input type="file" class="file:bg-red-600 file:text-white" />

Open: variant

The new open variant comes in handy to use when styling certain html elements like the details or dialog tags. With the open variant you can style elements differently based on their open state. For example, when the details element is open, we want to show a gray background.

<details class="bg-white open:bg-gray-100">
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Changes coming to version 3.0

The team at Tailwind Labs did their best to keep breaking changes to a minimum, and they did an outstanding job. Especially if you were already using the JIT-engine. Let’s see what things you may expect when upgrading to version 3.0. Note that this is based on the currently available information. Things may change during further development.

Purge needs to be renamed to content

This is a super small change, but an important one not to miss. The team behind Tailwind decided that it would be better to rename purge config key to content. They did this because the JIT-engine doesn’t actually use any PurgeCSS modules under the hood. So keep using the purge key in the config file doesn’t make sense.

The team even went so far that, in most cases Tailwind is so smart that it would even work with the old purge version 2.x syntax. But you most likely still want to change the config key, because the CLI will keep shouting at you that you should change it :-)

// tailwind.config.js - Version 2.x
module.exports = {
  purge: ['./src/**/*.html' /* ... */],
}

// tailwind.config.js - Version 3.x
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}

New naming convention for a few colors

In version 3.0 the whole extended colour palette is available by default. Due a naming collisions a few colors had to get new names. This should be a very easy thing to overcome and would cost you only a couple of minutes to fix.

The most important things are: All gray variants have a new naming convention. And a few others colors now have different shade by default.

You now can use the following utilities for gray colors:

• text-slate-500 (was version 2.x blueGray)
• text-gray-500 (was version 2.x coolGray is now the default)
• text-zinc-500 (was version 2.x default gray)
• text-neutral-500 (was version 2.x trueGray)
• text-stone-500 (was version 2.x warmGray)

Following colors and shades have different naming convection

• text-amber-500 (was version 2.x yellow)
• text-emerald-500 (was version 2.x green)
• text-violet-500 (was version 2.x purple)

Following colors are now available by default

• text-orange-500
• text-lime-500
• text-teal-500
• text-cyan-500
• text-sky-500
• text-fuchsia-500
• text-rose-500

Here is a reference table for the new color naming convention in version 3.0. If you want to read all the technical background information, check out this extensive pull request.

New name for overflow-clip

Due recent native browser support for overflow: clip; it would be confusing to keep using the Tailwind utility class overflow-clip for text-overflow: clip. Do you still follow me? Right, that’s why the have to change it ;-)

You now use text-clip for text-overflow: clip; To be consistent they also changed overflow-ellipsis to text-ellipsis. For reference in version 3.0 use the following:

PostCSS version 7 is no longer supported

This is only an issue if you are still using PostCSS version 7 or earlier in your projects. If you are still using PostCSS Version 7 you first need to upgrade to PostCSS version 8. This is mostly a thing for people who are using the create-react-app package in their projects. Because the current version over create-react-app still depends on PostCSS Version 7.

Luckily there is a new version of create-react-app on the horizon that is powered by PostCSS Version 8. So, most likely this won’t be an issue when Tailwind CSS Version 3.0 is released.

Wrapping things up

I hope that you are just as excited as I am for the next major Tailwind CSS version. It’s incredible how many cool features the team behind Tailwind is bringing to the table with this new release. Tailwind is keep getting better and better with every update.

Not all changes are big this time, but that’s a good thing. This means that Tailwind CSS is getting more mature.

I will keep updating this blog post with more information when new things are shared by the developers. If you don’t want to miss anything, make sure to subscribe to our newsletter.