v4.0.8

Added

• Allow @import with theme(…) options for stylesheets that contain more than just @theme rules (#16514)

Fixed

• Don't add !important to CSS variable declarations when using the important modifier (#16668)
• Vite: Ignore files and directories specified in your .gitignore file when using automatic source detection(#16631)
• Vite: Don't rely on the module graph for detecting candidates to ensure setups with multiple Vite builds work as expected (#16631)
• Vite: Ensure Astro production builds always contain classes used in client-only components (#16631)
• Vite: Always scan raw file contents for utility classes before any other transforms have been applied to ensure utility classes are scanned without any additional escaping (#16631)
• Ensure utilities with more declarations are always sorted before utilities with fewer declarations when utilities only define CSS variables (#16715)
• Only include translate-z-px utilities once in compiled CSS (#16718)

Changed

• Don't include theme variables that aren't used in compiled CSS (#16211, #16676)

v4.0.7

Fixed

• Export tailwindcss/lib/util/flattenColorPalette.js for backward compatibility (#16411)
• Fix sorting of numeric utility suggestions when they have different magnitudes (#16414)
• Show suggestions for fractions in IntelliSense (#16353)
• Don’t replace _ in suggested theme keys (#16433)
• Ensure --default-outline-width can be used to change the outline-width value of the outline utility (#16469)
• Ensure drop shadow utilities don't inherit unexpectedly (#16471)
• Export config and plugin types from tailwindcss/plugin for backward compatibility (#16505)
• Ensure JavaScript plugins that emit nested rules referencing the utility name work as expected (#16539)
• Statically link Visual Studio redistributables in @tailwindcss/oxide Windows builds (#16602)
• Ensure that Next.js splat routes are scanned for classes (#16457)
• Pin exact version of tailwindcss in @tailwindcss/* packages (#16623)
• Upgrade: Report errors when updating dependencies (#16504)
• Upgrade: Ensure a darkMode JS config setting with block syntax converts to use @slot (#16507)
• Upgrade: Ensure the latest version of tailwindcss and @tailwindcss/postcss are installed when upgrading (#16620)

v4.0.6

Fixed

• Revert change to no longer include theme variables that aren't used in compiled CSS (#16403)

v4.0.5

Added

• Add @theme static option for always including theme variables in compiled CSS (#16211)

Fixed

• Remove rogue console.log from @tailwindcss/vite (#16307)

Changed

• Don't include theme variables that aren't used in compiled CSS (#16211)

v4.0.4

Fixed

• Fix a crash when setting JS theme values to null (#16210)
• Ensure escaped underscores in CSS variables in arbitrary values are properly unescaped (#16206)
• Ensure that the containers JS theme key is added to the --container-* namespace (#16169)
• Ensure theme @keyframes are generated even if an --animation-* variable spans multiple lines (#16237)
• Vite: Skip parsing stylesheets with the ?commonjs-proxy flag (#16238)
• Fix order-first and order-last for Firefox (#16266)
• Fix support for older instruction sets on Linux x64 builds of the standalone CLI (#16244)
• Ensure NODE_PATH is respected when resolving JavaScript and CSS files (#16274)
• Ensure Node addons are packaged correctly with FreeBSD builds (#16277)
• Fix an issue where @variant inside a referenced stylesheet could cause a stack overflow (#16300)

v4.0.3

Fixed

• Fix incorrect removal of @import url(); (#16144)

v4.0.2

Fixed

• Only generate positive grid-cols-* and grid-rows-* utilities (#16020)
• Ensure escaped theme variables are handled correctly (#16064)
• Ensure we process Tailwind CSS features when only using @reference or @variant (#16057)
• Refactor gradient implementation to work around prettier/prettier#17058 (#16072)
• Vite: Ensure hot-reloading works with SolidStart setups (#16052)
• Vite: Fix a crash when starting the development server in SolidStart setups (#16052)
• Vite: Don't rebase URLs that appear to be aliases (#16078)
• Vite: Transform <style> blocks in HTML files (#16069)
• Prevent camel-casing CSS custom properties added by JavaScript plugins (#16103)
• Do not emit @keyframes in @theme reference (#16120)
• Discard invalid declarations when parsing CSS (#16093)
• Do not emit empty CSS rules and at-rules (#16121)
• Handle @variant when at the top-level of a stylesheet (#16129)

v4.0.1

Added

• Include :open pseudo-class in existing open variant (#15349)

Fixed

• Remove invalid min-w/h-none utilities (#15845)
• Discard CSS variable shorthand utilities that don't use valid CSS variables (#15738)
• Ensure font-size utilities with none modifier have a line-height set e.g. text-sm/none (#15921)
• Ensure font-size utilities with unknown modifier don't generate CSS (#15921)
• Don’t suggest font weight utilities more than once (#15857)
• Suggest container query variants (#15857)
• Disable bare value suggestions when not using the --spacing variable (#15857)
• Ensure suggested classes are properly sorted (#15857)
• Don’t look at .gitignore files outside initialized repos (#15941)
• Find utilities when using the Svelte class shorthand syntax across multiple lines (#15974)
• Find utilities when using the Angular class shorthand syntax (#15974)
• Find utilities when using functions inside arrays (#15974)
• Ensure that @tailwindcss/browser does not pollute the global namespace (#15978)
• Ensure that tailwind-merge is not scanned when using the Vite plugin (#16005)
• Ensure CSS theme variables are available within shadow roots (#15975)
• Fix crash when project lives in the / directory (#15988)
• Ensure custom variants have a non-empty selector list (#16009)
• Upgrade: Ensure JavaScript config files on different drives are correctly migrated (#15927)
• Upgrade: Migrate leading-[1] to leading-none (#16004)
• Upgrade: Do not migrate arbitrary leading utilities to bare values (#16004)

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)