v4.0.0

Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

• New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
• Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
• Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
• First-party Vite plugin — tight integration for maximum performance and minimum configuration.
• Automatic content detection — all of your template files are discovered automatically, with no configuration required.
• Built-in import support — no additional tooling necessary to bundle multiple CSS files.
• CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
• CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
• Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
• Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
• Container queries — first-class APIs for styling elements based on their container size, no plugins required.
• New 3D transform utilities — transform elements in 3D space directly in your HTML.
• Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
• @starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
• not-* variant — style an element only when it doesn't match another variant, custom selector, or media or feature query.
• Even more new utilities and variants — including support for color-scheme, field-sizing, complex shadows, inert, and more.

Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

For a deep-dive into everything that's new, check out the announcement post.

v4.0.0-beta.10

Added

• Add support for using @variant to use variants in your CSS (#15663)
• Include outline-color when transitioning colors (#15690)

Fixed

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

Changed

• Use more modern --alpha(color / 50%) syntax instead of --alpha(color, 50%) (#15665)
• Rename @variant to @custom-variant (#15663)
• Change outline-hidden to set outline-style: none except in forced colors mode (#15690)

v4.0.0-beta.9

Added

• Add @tailwindcss/browser package to run Tailwind CSS in the browser (#15558)
• Add @reference "…" API as a replacement for the previous @import "…" reference option (#15565)
• Add support for defining functional utilities in CSS (#15455)
• Add new --spacing(…), --alpha(…), and --theme(…) CSS functions (#15572)
• Add musl-based Linux builds of the standalone CLI (#15567)
• Improve performance of internal AST manipulations (#15529)

Fixed

• Use the correct property value for place-content-between, place-content-around, and place-content-evenly utilities (#15440)
• Don’t detect arbitrary properties when preceded by an escape (#15456)
• Fix incorrectly named bg-round and bg-space utilities to bg-repeat-round to bg-repeat-space (#15462)
• Fix inset-shadow-* suggestions in IntelliSense (#15471)
• Only compile arbitrary values ending in ] (#15503)
• Ensure @apply rules are processed in the correct order (#15542)
• Allow negative utility names in @utility (#15573)
• Remove all @keyframes contributed by JavaScript plugins when using @reference imports (#15581)
• Upgrade (experimental): Do not extract class names from functions (e.g. shadow in filter: 'drop-shadow(…)') (#15566)
• Upgrade (experimental): Migrate theme(spacing.2) to --spacing(2) (#15579)
• Upgrade (experimental): Migrate theme(…) to --theme(…) (#15579)

Changed

• Remove --container-prose in favor of a deprecated --max-width-prose theme variable so that *-prose is only available for max-width utilities and only for backward compatibility (#15439)
• Use Vite post-processor APIs for processing Svelte <style> blocks (#15436)

v4.0.0-beta.8

Fixed

• Ensure Symbol.dispose and Symbol.asyncDispose are polyfilled (#15404)

v3.4.17

Fixed

• Work around Node v22.12+ issue (#15421)

v4.0.0-beta.7

Added

• Export tailwindcss/lib/util/flattenColorPalette for backward compatibility (#15318)
• Improve debug logs to get better insights (#15303)

Fixed

• Fix dependency related warnings when using @tailwindcss/postcss on Windows (#15321)
• Skip creating a compiler for CSS files that should not be processed (#15340)
• Fix missing shadow-none suggestion in IntelliSense (#15342)
• Optimize AST before printing for IntelliSense (#15347)
• Generate vendor prefixes for Chrome 111+ (e.g. -webkit-background-clip: text) (#15389)

Changed

• Rename --aspect-ratio-* theme key to --aspect-* (#15365)
• Derive aspect-video utility from theme (#15365)

v4.0.0-beta.6

Fixed

• Ensure @import "…" reference never generates utilities (#15307)

v4.0.0-beta.5

Added

• Parallelize parsing of individual source files (#15270)
• Add new @import "…" reference option for importing Tailwind CSS configuration details into another CSS entry point without duplicating CSS (#15228)
• Improve performance of @tailwindcss/postcss by translating between internal data structures and PostCSS nodes directly without additional parsing or stringification (#15297)

Fixed

• Ensure absolute URLs inside imported CSS files are not rebased when using @tailwindcss/vite (#15275)
• Fix issues with dev servers using Svelte 5 with @tailwindcss/vite (#15274)
• Support installing @tailwindcss/vite in Vite 6 projects (#15274)
• Fix resolution of imported CSS files in SSR builds with @tailwindcss/vite (#15279)
• Ensure other plugins can run after @tailwindcss/postcss (#15273)
• Rebase URLs inside imported CSS files when using Vite with the @tailwindcss/postcss extension (#15273)
• Fix missing font family suggestions in IntelliSense (#15288)
• Fix missing @container suggestion in IntelliSense (#15288)

v3.4.16

Fixed

• Ensure the TypeScript types for PluginsConfig allow undefined values (#14668)

Changed

• Bumped lilconfig to v3.x (#15289)

v4.0.0-beta.4

Fixed

• Don't scan source files for utilities unless @tailwind utilities is present in the CSS in @tailwindcss/postcss and @tailwindcss/vite (#15226)
• Skip reserializing CSS files that don't use Tailwind features in @tailwindcss/postcss and @tailwindcss/vite (#15226)
• Upgrade (experimental): Do not migrate the overflow-clip utility (#15244)
• Upgrade (experimental): Rename backdrop-blur to backdrop-blur-sm and backdrop-blur-sm to backdrop-blur-xs (#15242)