Tailwind CSS now with built-in support for background gradients

Eric L. Barnes Published August 18, 2020

Tailwind v1.7.0 is now released and it includes built-in support for background gradients, new background-clip utilities, new gap utility aliases, and more!

The big feature is back gradients and it will allow you to do things like this:

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

You can combine this new gradient feature with the new background-clip utilities to do things like this:

<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>

These are just some of the highlights of the new release and their announcement covers all the new features, deprecations, and new experimental features.