TL;DR

Tailwind CSS v4.3 introduces new utilities for controlling scrollbars, zoom levels, and tab focus, alongside improvements to @container-size and @variant functionality for more flexible styling.

New

• Scrollbar Utilities: New scrollbar-* classes provide control over scrollbar appearance (styling tool).
• @container-size: Expanded utility for responsive designs based on container size.
• zoom-* and tab-* Utilities: Added classes for controlling zoom and tab focus styles.

Fixes Worth Knowing

• Vite Integration: Resolved issues with plugin resolution and processing of CSS files when using @tailwindcss/vite (JavaScript build tool).
• Arbitrary Value Handling: Improved canonicalization (CSS simplification) of arbitrary values, preserving units and whitespace for more predictable results.
• @variant Support: @variant now works with stacked and compound variants, offering greater flexibility in defining responsive styles.

TL;DR

Tailwind CSS now correctly handles complex calculations involving sibling selectors, preventing unexpected layout issues.

Fixes Worth Knowing

• Fixed an issue where Tailwind’s sibling() function (utility class selector) would break when used within calc() expressions, ensuring accurate sizing and positioning in those scenarios.

Before You Upgrade

No action is needed; this is a bug fix release.

TL;DR

Tailwind CSS v4 introduces @custom-variant (custom CSS variants) allowing more flexible styling and improved variant handling.

Breaking

• @variant is now @custom-variant (CSS variant definition).
• outline-hidden now sets outline-style: none (CSS outline style).
• Alpha color syntax changed to --alpha(color / 50%) (CSS color transparency).

New

• Custom Variants: Define your own CSS variants with @custom-variant for greater control over styling.

Fixes Worth Knowing

• Improved theme resolution: Custom functional utilities now correctly respect your @theme options.
• IntelliSense: -outline-offset-* utilities are now suggested in your editor.

Before You Upgrade

• Update any usages of @variant to @custom-variant in your configuration file.

TL;DR

Tailwind CSS now correctly generates styles when used with PostCSS 7 (a CSS processing tool), resolving a critical bug for projects using that version.

Fixes Worth Knowing

• Resolved an issue causing incorrect CSS output with PostCSS 7, ensuring styles are applied as expected.

Before You Upgrade

• If you are using PostCSS 7, verify your builds after upgrading to ensure styles are generated correctly.

TL;DR

Tailwind CSS v3 introduces significant new functionality, including negative values, grow/shrink utilities, and a composable API for colored box shadows, dramatically expanding styling options.

Breaking

• Remove prefix function (used for customizing class prefixes).
• flex-grow-* and flex-shrink-* utilities are deprecated; use grow-* and shrink-* instead.

New

• Negative Values: Easily apply negative margins, widths, etc.
• grow/shrink Utilities: New utilities for controlling flex item growth and shrinkage.
• Colored Box Shadows: Composable API for creating custom colored box shadows (visual effect).

Fixes Worth Knowing

• Resolved issues with stale builds on Windows (build process).
• Fixed CLI --content option to work as expected (command line interface).

Before You Upgrade

• Update @tailwindcss/typography and @tailwindcss/forms to their @next versions alongside Tailwind itself.

TL;DR

TailwindCSS now uses PostCSS 8 and Autoprefixer 10, requiring updates to your build tooling, and introduces new ring utilities for more flexible visual styling.

Breaking

• PostCSS/Autoprefixer Upgrade: Tailwind now requires PostCSS 8 and Autoprefixer 10 as peer dependencies. (Update your postcss.config.js)
• grid-gap Removed: The grid-gap utility is removed; use gap instead. (Modern grid syntax)
• clearfix Removed: The clearfix utility is removed; use flow-root instead. (Alternative for clearing floats)

New

• Ring Utilities: New ring and ring-inset utilities provide more control over element outlines and shadows.
• Variant Support: focus, focus-within, and dark variants are now enabled by default for ring utilities.

Fixes Worth Knowing

• Ring Styles: Ring styles now correctly reset, preventing unexpected inheritance.
• Color Palette: Tailwind now handles empty color palettes without crashing.
• Shadow/Ring Cascade: Shadow

TL;DR

Tailwind CSS now correctly extends the default configuration when using custom presets, resolving unexpected behavior and ensuring consistent theme application.

Breaking

• Presets without a presets key now correctly extend the default config (adjust your preset config to include presets: [] if you relied on the previous, incorrect behavior).

New

[None]

Fixes Worth Knowing

• theme customizations now correctly resolve default line-heights.
• Plugin changes are now reliably detected during development (watch mode).
• tailwindcss init --full now generates a valid configuration file.

Before You Upgrade

If you have custom Tailwind CSS presets that don't explicitly define a presets: [] key, add it to ensure your preset extends the default configuration as expected.

TL;DR

Tailwind CSS now includes more granular shadow and line-height control, expanded grid functionality, and improved font handling with system-ui as a default option.

Breaking

• font-sans no longer includes Inter font (a typeface); projects relying on it will need to specify a different sans-serif font.

New

• Grid Row Utilities: New classes provide precise control over grid row sizing.
• Shadow & Line-Height: Expanded utilities offer finer adjustments for shadows and line heights.

Fixes Worth Knowing

• Importing Tailwind CSS now works even without postcss-import (a PostCSS plugin).
• The tailwind command now aliases to tailwindcss (command-line tool).

Before You Upgrade

If you explicitly set font-sans and relied on Inter, update your configuration to specify an alternative sans-serif font.

TL;DR

Tailwind CSS now correctly handles class names with periods, preventing unexpected responsive prefixes.

Breaking

• Class names with periods (.) will no longer receive incorrect responsive prefixes (fixes a potential layout issue).

Fixes Worth Knowing

• Fixed an issue where class names containing periods were incorrectly modified, potentially breaking custom designs.

Before You Upgrade

• Review any custom CSS that relies on specific class name formatting with periods to ensure expected behavior.