●Change8

v4.0.0-beta.10

Breaking Changes
📦 tailwind-css
⚠ 3 breaking✨ 2 features🐛 8 fixes🔧 8 symbols

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.

⚠️ Breaking Changes

  • The @variant directive has been renamed to @custom-variant. Update all CSS files using @variant to use @custom-variant instead.
  • The internal alpha syntax has changed from --alpha(color, 50%) to --alpha(color / 50%).
  • The outline-hidden utility now sets outline-style: none except in forced colors mode.

Migration Steps

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

✨ New Features

  • Add support for using @custom-variant (formerly @variant) to define variants in CSS.
  • Include outline-color when transitioning colors.

🐛 Bug Fixes

  • Add missing main and browser fields for @tailwindcss/browser.
  • Support escaping * in theme namespace syntax (e.g.: --color-\*: initial;).
  • Respect @theme options when resolving values in custom functional utilities.
  • Discard invalid variants such as data-checked-[selected=1]:*.
  • Ensure -outline-offset-* utilities are suggested in IntelliSense.
  • Write to stdout when --output is set to - or omitted with @tailwindcss/cli.
  • Prevent not-* from being used with variants that have multiple sibling rules.
  • Pretty print --spacing(…) in experimental upgrade tool to prevent ambiguity.

🔧 Affected Symbols

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