●Change8

v4.3.0

Breaking Changes
📦 tailwind-cssView on GitHub →
⚠ 2 breaking✨ 8 features🐛 13 fixes🔧 16 symbols

Summary

This release introduces several new utilities, including container size, scrollbar control, zoom, and tab utilities. It also significantly improves the robustness and correctness of CSS canonicalization, especially concerning arbitrary values and `:has()` variants.

⚠️ Breaking Changes

  • Arbitrary `:has()` variants defined using the old `[&:has(…)]` syntax will now be migrated to the new `has-[…]` syntax during canonicalization. If you rely on the old syntax in non-canonicalized contexts, update them to use `has-[…]`.
  • The upgrade process no longer migrates inline `style` attributes (e.g., `style="flex-grow: 1"` will remain unchanged instead of potentially being converted to `style="grow: 1"`). This prevents unintended style attribute modifications.

Migration Steps

  1. If you rely on arbitrary `:has()` variants defined using the old `[&:has(…)]` syntax, update them to use the new `has-[…]` syntax.
  2. Review any inline `style` attributes that were previously being modified by Tailwind CSS during processing, as this behavior has been disabled.

✨ New Features

  • Added `@container-size` utility.
  • Added scrollbar utilities: `scrollbar-{auto,thin,none}` for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color`.
  • Added `scrollbar-gutter-*` utilities.
  • Added `zoom-*` utilities.
  • Added `tab-*` utilities.
  • Allowed using `@variant` with stacked variants (e.g., `@variant hover:focus { … }`).
  • Allowed using `@variant` with compound variants (e.g., `@variant hover, focus { … }`).
  • Support for `--default(…)` within `--value(…)` and `--modifier(…)` for functional `@utility` definitions.

🐛 Bug Fixes

  • Fixed `@plugin` resolving browser CSS entries instead of package JavaScript entries when using `@tailwindcss/vite`.
  • Fixed relative `@import` and `@plugin` paths resolving from the wrong directory when using `@tailwindcss/vite`.
  • Ensured CSS files containing `@variant` are processed by `@tailwindcss/vite`.
  • Resolved imports relative to `base` when `result.opts.from` is not provided when using `@tailwindcss/postcss`.
  • Canonicalization now preserves significant `_` whitespace in arbitrary values.
  • Canonicalization now adds parentheses when removing whitespace from arbitrary values would hurt readability (e.g., `w-[calc(100%---spacing(60))]` becomes `w-[calc(100%-(--spacing(60)))]`).
  • Canonicalization now preserves the original unit in arbitrary values instead of normalizing to base units (e.g., `-mt-[20in]` remains `-mt-[20in]`).
  • Canonicalization now migrates arbitrary `:has()` variants from `[&:has(…)]` to `has-[…]`.
  • Ensured legacy `start` and `end` utilities without values do not generate CSS.
  • Ensured `--value(…)` is required in functional `@utility` definitions.
  • Canonicalization now preserves required whitespace around operators in negated arbitrary values (e.g., `-left-[(var(--a)+var(--b))]`).
  • Allowed multiple `@utility` definitions with the same name but different value types.
  • Exported missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types.

Affected Symbols

container-size utilityscrollbar-width utilitiesscrollbar-color utilitiesscrollbar-gutter utilitieszoom utilitiestab utilities@variant directive@utility definition@plugin@tailwindcss/vite@tailwindcss/postcssarbitrary values canonicalization:has() variantsstart utilityend utilityPluginWithConfig type