Tailwind CSS 1.7: What's New, Release History & EOL Status

What Is New in Tailwind CSS 1.7

How can I add background gradients using Tailwind CSS 1.7?

Tailwind 1.7 ships with built-in gradient utilities that let you create linear gradients directly in your markup.

• Use bg-gradient-to-{direction} to set the gradient direction.
• Combine from-, via-, and to- color stops to define up to three colors.

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

In practice this replaces custom CSS background-image rules and works with responsive variants out of the box.

What new utilities let me clip backgrounds or create gradient text?

Tailwind 1.7 adds a backgroundClip core plugin with four utilities for controlling the background-clip property.

• bg-clip-border → background-clip: border-box
• bg-clip-padding → background-clip: padding-box
• bg-clip-content → background-clip: content-box
• bg-clip-text → background-clip: text

<h1 class="text-6xl font-bold">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
    Gradient Text
  </span>
</h1>

These utilities are responsive by default, so you can switch clipping modes at different breakpoints without extra CSS.

How do I migrate from the old gap utilities to the new gap-x / gap-y syntax?

The old col-gap-{n} and row-gap-{n} classes are still available but will be removed in v2.0.

• Replace col-gap-4 row-gap-2 with gap-x-4 gap-y-2.
• Enable the future flag to drop the deprecated utilities early:

// tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

Watch out for console warnings until the flag is set; they help you catch any missed class names during migration.

Can I use @apply with responsive and pseudo-class variants in Tailwind 1.7?

Yes, the experimental applyComplexClasses flag unlocks @apply support for variants and complex class combinations.

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

Enable it in your config:

// tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
}

This matters if you want to keep component styles in a single CSS rule while still leveraging Tailwind's responsive and state variants.