Home

1 minute read

Tailwind 1.7 Release

Tony Lea

Tailwind 1.7 Release

Tailwind 1.7 has been released with some really cool new features. Here are some of the cool things you should probably know about the latest version.

Gradients

I love a good gradient, and now inside of Tailwind 1.7 you can easily add some badass gradient backgrounds to your elements. Take a look at the following example:

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
    <!-- ... -->
</div>

This will generate the following:

tailwind-gradients.png

Background-clip utilities

Have you ever wanted to add some rad gradients to the text on your site? Well, now with the background-clip utilities you can do just that. Take a look at the following code:

<h1 class="text-6xl font-bold">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
        Greetings from Tailwind v1.7.
    </span>
</h1>

The code above will generate the following:

background-clip-text.png

Gap aliases

Currently when working with the grid utility classes in tailwind you can define the spacing between columns and rows with col-gap-{n} and row-gap-{n}. To keep things consistent the following classes have been added gap-x-{n} and gap-y-{n}.

Both of the gap classes will still work; however, it's recommended to use the new aliases because the old gap classes will be deprecated in version 2.

Experimental Features

There are also a handful of new experimental features being introduced in the new version; however, you will have to opt-in to these experimental features by adding the following to your tailwind config:

// tailwind.config.js
module.exports = {
  experimental: 'all',
}

One of the experimental features that I'm really excited about is the ability to use the @apply with variants and other complex classes like so:

.btn {
  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;
}

Before this feature you would have to implement it like this:

.btn{
    @apply bg-indigo;
    &hover{
        @apply bg-indigo-700;
    }
    @media (min-width: 640px) {
        @apply text-lg;
    }
}

Which seems like a lot more work, but now with this new experimental feature you can do it in one line :)

You may want to be careful with the experimental features, because, they are of course experimental and may not be fully stable just yet.

Conclusion

Those are only a few of the features packed with this new version. Be sure to check out the whole release changelog on Github at: https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0