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

What Is New in Tailwind CSS 1.5

How do I enable variants for component classes in Tailwind CSS 1.5?

You can now generate responsive and other variants for component classes using the new variants option in the plugin API or the @layer directive.

• When adding components via addComponents, pass a second argument with variants: ['responsive'] (or any other variant you need).
• Alternatively, use the array shorthand: addComponents({'.card': {/* ... */}}, ['responsive']).
• For plain CSS, wrap your component rules in @layer components and @responsive to let Tailwind purge correctly.

plugin(function ({ addComponents }) {
  addComponents({
    '.card': {
      /* component styles */
    }
  }, {
    variants: ['responsive']
  })
})

Can the container utility be responsive in Tailwind CSS 1.5?

Yes, the container class now supports responsive variants out of the box.

• Apply md:container to lock the container width only at medium breakpoints and above.
• Additional variants such as focus or group-hover can be enabled via the variants.container array in tailwind.config.js.

<div class="md:container">
  <!-- content -->
</div>

What is the new focus-visible variant and when should I use it?

The focus-visible variant lets you apply styles only when an element receives focus via keyboard navigation, keeping mouse interactions untouched.

• Enable it by adding focus-visible to the desired utilities in the variants section of tailwind.config.js.
• Typical use case: focus-visible:outline-none focus-visible:shadow-outline on buttons.
• Browser support is still limited; consider the WICG focus-visible polyfill or the postcss-focus-visible plugin for broader coverage.

<button class="focus-visible:outline-none focus-visible:shadow-outline">
  Click me
</button>

How can I style checked form controls with Tailwind CSS 1.5?

The new checked variant enables conditional styling of checkboxes and radio buttons.

• Add checked to the utilities you want to respond to the :checked pseudo-class.
• Enable it in tailwind.config.js under the appropriate utility's variants array.
• Example: bg-white checked:bg-blue-500 changes the background when the input is checked.

<input type="checkbox" class="bg-white checked:bg-blue-500" />