What’s New

Tailwind CSS v4.3.0

v4.3.0
Added
  • Add `@container-size` utility
  • Add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color`
  • Add `scrollbar-gutter-*` utilities
  • Add `zoom-*` utilities
  • Add `tab-*` utilities
  • Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`)
  • Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`)
  • Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions
Fixed
  • Ensure `@plugin` resolves package JavaScript entries instead of browser CSS entries when using `@tailwindcss/vite`
  • Fix relative `@import` and `@plugin` paths resolving from the wrong directory when using `@tailwindcss/vite`
  • Ensure CSS files containing `@variant` are processed by `@tailwindcss/vite`
  • Resolve imports relative to `base` when `result.opts.from` is not provided when using `@tailwindcss/postcss`
  • Canonicalization: preserve significant `_` whitespace in arbitrary values
  • Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability
  • Canonicalization: preserve the original unit in arbitrary values instead of normalizing to base units
  • Canonicalization: migrate arbitrary `:has()` variants from `[&:has(…)]` to `has-[…]`
  • Upgrade: don't migrate inline `style` attributes
  • Allow multiple `@utility` definitions with the same name but different value types
  • Export missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types
  • Ensure `start` and `end` legacy utilities without values do not generate CSS
  • Ensure `--value(…)` is required in functional `@utility` definitions
  • Canonicalization: preserve required whitespace around operators in negated arbitrary values
Added
  • Add @container-size utility (#18901)
  • Add scrollbar-{auto,thin,none} utilities for scrollbar-width, and scrollbar-thumb-* / scrollbar-track-* color utilities for scrollbar-color (#19981, #20019)
  • Add scrollbar-gutter-* utilities (#20018)
  • Add zoom-* utilities (#20020)
  • Add tab-* utilities (#20022)
  • Allow using @variant with stacked variants (e.g. @variant hover:focus { … }) (#19996)
  • Allow using @variant with compound variants (e.g. @variant hover, focus { … }) (#19996)
  • Support --default(…) in --value(…) and --modifier(…) for functional @utility definitions (#19989)
Fixed
  • Ensure @plugin resolves package JavaScript entries instead of browser CSS entries when using @tailwindcss/vite (#19949)
  • Fix relative @import and @plugin paths resolving from the wrong directory when using @tailwindcss/vite (#19965)
  • Ensure CSS files containing @variant are processed by @tailwindcss/vite (#19966)
  • Resolve imports relative to base when result.opts.from is not provided when using @tailwindcss/postcss (#19980)
  • Canonicalization: preserve significant _ whitespace in arbitrary values (#19986)
  • Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability (e.g. w-[calc(100%---spacing(60))] → w-[calc(100%-(--spacing(60)))]) (#19986)
  • Canonicalization: preserve the original unit in arbitrary values instead of normalizing to base units (e.g. -mt-[20in] → mt-[-20in], not mt-[-1920px]) (#19988)
  • Canonicalization: migrate arbitrary :has() variants from [&:has(…)] to has-[…] (#19991)
  • Upgrade: don’t migrate inline style attributes (e.g. style="flex-grow: 1" → style="flex-grow: 1", not style="grow: 1") (#19918)
  • Allow multiple @utility definitions with the same name but different value types (#19777)
  • Export missing PluginWithConfig type from tailwindcss/plugin to fix errors when inferring plugin config types (#19707)
  • Ensure start and end legacy utilities without values do not generate CSS (#20003)
  • Ensure --value(…) is required in functional @utility definitions (#20005)
  • Canonicalization: preserve required whitespace around operators in negated arbitrary values (e.g. -left-[(var(--a)+var(--b))]) (#20011)
View original