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:

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:

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