●Change8

Migrating to Tailwind CSS v4.0.0-beta.10

Version v4.0.0-beta.10 introduces 3 breaking changes. This guide details how to update your code.

Released: 1/21/2025

3
Breaking Changes
3
Migration Steps
8
Affected Symbols

⚠️ Check Your Code

If you use any of these symbols, you need to read this guide:

@variant@custom-variantoutline-hiddenoutline-color@tailwindcss/browser@tailwindcss/cli--spacingnot-*

Breaking Changes

●Issue #1

The @variant directive has been renamed to @custom-variant. Update all CSS files using @variant to use @custom-variant instead.

●Issue #2

The internal alpha syntax has changed from --alpha(color, 50%) to --alpha(color / 50%).

●Issue #3

The outline-hidden utility now sets outline-style: none except in forced colors mode.

Migration Steps

  1. 1
    Search and replace @variant with @custom-variant in your CSS files.
  2. 2
    Verify any custom color transitions to ensure outline-color is handled as expected.
  3. 3
    If using the experimental upgrade tool, review changes to --spacing() formatting.

Release Summary

This release introduces @custom-variant for CSS-defined variants, updates outline-hidden behavior, and transitions to a modern alpha syntax. It also includes several bug fixes for the CLI, IntelliSense, and theme resolution.

Need More Details?

View the full release notes and all changes for Tailwind CSS v4.0.0-beta.10.

View Full Changelog