@tailwindcss/oxide

Added

• Add @tailwindcss/turbopack, a Turbopack loader for using Tailwind CSS with Next.js

Fixed

• Ensure watch mode detects changes to symlinked @source files whose real paths aren't otherwise scanned

• Ensure variants using @scope wrap generated utilities instead of nesting inside them

• Ensure nested @scope rules preserve their scoping semantics when flattened

• Preserve declarations directly inside @scope by wrapping them in :where(:scope)

• Ensure generated utilities include a space in empty var() fallbacks (e.g. var(--tw-blur,) → var(--tw-blur, ))

• Canonicalization: Convert arbitrary breakpoint and container query variants to named equivalents (e.g. max-[64rem]:flex → max-lg:flex)

• Prevent @tailwindcss/vite from crashing on every edit under Vite's experimental bundledDev mode

• Ensure @tailwindcss/oxide falls back to WASM on platforms without native bindings

• Extract class candidates from Ruby %w and %W literals using angle brackets or custom delimiters (e.g. %w<flex>, %w|flex|), including in Slim and Haml templates

• Preserve whitespace in --default(…) values in functional @utility definitions (e.g. --default(box alphabetic) no longer becomes boxalphabetic)

• Ensure automatic source detection respects negation-based .gitignore files (e.g. /* followed by !/… patterns)

• Ensure root theme('…') namespace lookups in JavaScript plugins and config files return the full namespace object instead of the value of its DEFAULT key

• Skip ignored directories when generating watch globs instead of walking their contents on every rebuild

• Drop invalid UTF-8 candidates during class detection

• Prevent @tailwindcss/vite from forcing full-page reloads for scanned files that Vite does not handle as modules (e.g. .php files)

• Canonicalization: Don't merge utilities that reference different theme variables set to CSS-wide keywords like unset

• Don't generate utilities when a modifier is used that would otherwise be silently ignored (e.g. rounded-sm/[5], shadow-sm/foo, stroke-2/50)

• Preserve and, or, and not inside selectors in supports-[…] variants (e.g. supports-[selector(a:not(.foo))]:flex)

• Don't warn about Angular's ::ng-deep and :host-context() when optimizing CSS

• Don't generate CSS for candidates containing an empty additional modifier (e.g. bg-red-500/50/ and group-hover/foo//bar:flex)

• Ensure min-*, max-*, and container query variants with decimal values are sorted numerically (e.g. min-[40.25rem] before min-[40.5rem])

• Ensure CSS comments ending with \*/ are closed correctly instead of swallowing the CSS that follows (e.g. /* C:\temp\*/)

• Improve style invalidation performance of group-* and peer-* variants

• Ensure cached compilers release their loadModule and loadStylesheet callbacks after compilation

• Canonicalization: Preserve & when moving a pseudo-element into * or ** (e.g. [&_::before]:flex → **:[&::before]:flex)

• Ensure the Set.prototype.intersection polyfill in canonicalizeCandidates(…) returns the intersection instead of the first set on Node.js < 22

• Canonicalization: Ensure inline theme(…) alphas with more than 2 decimals migrate to a percentage modifier with the same opacity (e.g. theme(colors.red.500/.12345) → text-red-500/[12.345%], not text-red-500/[12.345])

• Canonicalization: Preserve inline theme(…) alphas as an arbitrary percentage when a custom --opacity-* theme value would change the opacity (e.g. theme(colors.red.500/50%) → text-red-500/[50%] with --opacity-50: 10%)

• Ensure the @property fallback isn't applied in Safari versions that no longer support margin-trim: inline

• Treat viewport units like dvmin and svi and font-relative units like cap and rex as lengths in arbitrary values (e.g. text-[10dvmin] generates font-size instead of color)

• Write plugin logs to stderr in tailwindcss canonicalize so they don't end up in the results on stdout

• Extract class shorthands on later lines when Pug text, comments, or quoted attribute values contain unbalanced brackets, or a quote that doesn't start a string (e.g. input(pattern=/"/.source)) (#20547, #20572)

• Underline the correct occurrence of an unsupported data type in --value(…) warnings

• Canonicalization: Prefer an existing candidate when collapsing utilities over another utility with the same default theme value (e.g. text-foreground text-primary → text-primary, not text-card-checked-border)

• Canonicalization: Don't collapse utilities into a utility that uses another theme variable with the same default value (e.g. mt-card mb-card → my-card, not my-4)

• Ensure @tailwindcss/postcss rewrites relative url(…)s of stylesheets that are inlined before it runs (e.g. @imports in Vite) in optimized builds

• Drop nested rules that put a combinator after a pseudo-element when using pseudo-element variants (e.g. selection:* on a utility with a nested & > * rule)

• Don't generate CSS for arbitrary values with unbalanced parentheses or brackets (e.g. w-[calc(1px] or [--x:a[b])

• Canonicalization: Prevent collapse: true from taking exponentially longer when classes are linked through a utility that sets many properties (e.g. sr-only)

• Ensure & is substituted inside :-moz-any(…) and :-webkit-any(…) in custom variants (e.g. @custom-variant firefox (:-moz-any(&));)

• Ensure the standalone macOS binaries have a valid code signature, so macOS 27 no longer kills them at launch

• Ensure @tailwindcss/turbopack and @tailwindcss/webpack rebuild when the input CSS changes (e.g. next dev with Turbopack no longer serves the CSS of the previous edit)

• Canonicalization: Don't drop a utility that sets a --tw-* variable when an unrelated property has the same value (e.g. link mt-4 no longer becomes mt-4 when link sets margin-top: 16px and --tw-translate-x: 16px)

• Decode single-digit hexadecimal escapes in theme variable and @utility names as the CSS spec does (e.g. @theme { --color-\0: red; } no longer registers --color-0)

• Don't treat !important inside strings, comments or url() in declaration values as the important flag (e.g. content: "a !important b")

• Parse a custom property at the end of the input when it has no trailing ; (e.g. --foo: bar as the last declaration)

• Keep a declaration without a ; at the end of the CSS input (e.g. color: red)

Fixed

• Support --watch --poll[=ms] in @tailwindcss/cli when filesystem events are unreliable or unavailable

• Canonicalization: Match arbitrary hex colors against theme colors case-insensitively (e.g. bg-[#fff] and bg-[#FFF] → bg-white)

• Prevent Preflight from overriding Firefox's native iframe:focus-visible outline styles

• Ensure theme('colors.foo') in JS plugins resolves correctly when both --color-foo and --color-foo-bar exist

• Ensure fractional opacity modifiers work with named shadow sizes like shadow-sm/12.5, text-shadow-sm/12.5, drop-shadow-sm/12.5, and inset-shadow-sm/12.5

• Parse selectors like [data-foo]div as two selectors instead of one

• Ensure @tailwindcss/postcss rebuilds when a preprocessor like Sass changes the input CSS without changing the input file on disk

• Ensure CSS nesting is handled even when Lightning CSS isn't run, such as in @tailwindcss/browser and Tailwind Play

• Prevent achromatic theme colors from shifting hue when mixed in polar color spaces like oklch

• Ensure --spacing(0) is optimized to 0px instead of 0 so it remains a <length> when used in calc(…)

• Load @parcel/watcher only when needed in @tailwindcss/cli --watch mode, so one-off builds and --watch --poll work when @parcel/watcher can't be loaded

• Use explicit platform fonts instead of system-ui and ui-sans-serif so CJK text respects the page's lang attribute on Windows

• Prevent @tailwindcss/upgrade from rewriting ignored files when run from a subdirectory

• Ensure earlier @source rules pointing to nested files are scanned when later @source rules point to files in parent folders

• Prevent @tailwindcss/vite from triggering full page reloads when scanned files are processed by Vite but haven't been loaded as modules yet

Fixed

• Support bare spacing values for auto-rows-* and auto-cols-* utilities (e.g. auto-rows-12 and auto-cols-16)

• Prevent @tailwindcss/cli in --watch mode from crashing on Windows when @source points to a directory that doesn't exist

• Prevent @tailwindcss/vite from crashing in Deno v2.8.x when context.parentURL is not a valid URL

• Ensure @tailwindcss/cli in --watch mode rebuilds when the input CSS file changes in an ignored directory

• Allow @variant rules used in addBase(…) to use custom variants defined later

• Prevent @tailwindcss/vite from crashing during HMR when scanned files or directories are deleted

• Generate font-size instead of color declarations for text-[--spacing(…)]

• Prevent @source patterns from scanning unrelated sibling files and folders

• Extract class candidates adjacent to Template Toolkit delimiters like %]…[% in .tt, .tt2, and .tx files

• Extract class candidates from conditional Maud syntax like p.text-black[condition]

• Prevent @position-try rules from triggering unknown at-rule warnings when optimizing CSS

• Support class suggestions for named opacity modifiers from --opacity theme values

• Prevent type errors in @tailwindcss/postcss when used with newer PostCSS patch releases

Added

• Add --silent option to suppress output in @tailwindcss/cli

Fixed

• Remove deprecation warnings by using Module#registerHooks instead of Module#register on Node 26+

• Canonicalization: Don't crash when plugin utilities throw for unsupported values

• Allow @apply to be used with CSS mixins

• Ensure not-* correctly negates @container queries, including style(…) queries

• Ensure drop-shadow-* color utilities work with custom shadow values containing calc(…)

• Fix 'Sourcemap is likely to be incorrect' warnings when using @tailwindcss/vite

• Ensure @tailwindcss/webpack can be installed in Rspack projects without requiring webpack as a peer dependency

• Canonicalization: Don't suggest invalid calc(…) expressions (e.g. px-[calc(1rem+0px)] → px-[calc(1rem+0)])

• Canonicalization: Avoid suggesting large spacing-scale values for arbitrary lengths (e.g. left-[99999px] → left-[99999px], not left-24999.75)

• Ensure @tailwindcss/cli in --watch mode recovers when a tracked dependency is deleted and restored

• Ensure standalone @tailwindcss/cli binaries are ignored when scanning for class candidates

• Ensure class candidates are extracted from Twig addClass(…) and removeClass(…) calls

• Don't crash in the Ruby or Vue preprocessors when scanning files containing invalid UTF-8 bytes

• Allow @variant to be used inside addBase

• Ensure @source globs with symlinks are preserved

• Ensure later @source rules can re-include files excluded by earlier @source not rules

• Upgrade: Don't migrate empty class rules to invalid @utility rules

• Ensure transitions between inset-shadow-none and other inset shadows work correctly

• Ensure explicitly referenced @source directories are scanned even when ignored by git

• Ensure @source globs ending in **/* preserve dynamic path segments to avoid scanning too many files

• Canonicalization: Don't fold calc(…) divisions when the result would require high precision (e.g. w-[calc(100%/3.5)] → w-[calc(100%/3.5)], not w-[28.571428571428573%])

• Serve ESM type declarations to ESM importers of @tailwindcss/postcss

Changed

• Generate 0 instead of calc(var(--spacing) * 0) for spacing utilities like m-0 and left-0

• Generate var(--spacing) instead of calc(var(--spacing) * 1) for spacing utilities like m-1 and left-1

Added

• Add @container-size utility

• 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

• 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 (e.g. w-[calc(100%---spacing(60))] → w-[calc(100%-(--spacing(60)))])

• Canonicalization: Preserve the original unit in arbitrary values instead of normalizing to base units (e.g. -mt-[20in] → mt-[-20in], not mt-[-1920px])

• Canonicalization: Migrate arbitrary :has() variants from [&:has(…)] to has-[…]

• Upgrade: don’t migrate inline style attributes (e.g. style="flex-grow: 1" → style="flex-grow: 1", not style="grow: 1")

• 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 (e.g. -left-[(var(--a)+var(--b))])

Fixed

• Canonicalization: Improve canonicalizations for tracking-* utilities by preferring non-negative utilities (e.g. -tracking-tighter → tracking-wider)

• Fix crash due to invalid characters in candidate (exceeding valid unicode code point range)

• Ensure query params in imports are considered unique resources when using @tailwindcss/webpack

• Canonicalization: Collapse arbitrary values into shorthand utilities (e.g. px-[1.2rem] py-[1.2rem] → p-[1.2rem])

• Canonicalization: Collapse border-{t,b}-* into border-y-*, border-{l,r}-* into border-x-*, and border-{t,r,b,l}-* into border-*

• Canonicalization: Collapse scroll-m{t,b}-* into scroll-my-*, scroll-m{l,r}-* into scroll-mx-*, and scroll-m{t,r,b,l}-* into scroll-m-*

• Canonicalization: Collapse scroll-p{t,b}-* into scroll-py-*, scroll-p{l,r}-* into scroll-px-*, and scroll-p{t,r,b,l}-* into scroll-p-*

• Canonicalization: Collapse overflow-{x,y}-* into overflow-*

• Canonicalization: Collapse overscroll-{x,y}-* into overscroll-*

• Read from --placeholder-color instead of --background-color for placeholder-* utilities

• Upgrade: Ensure files are not emptied out when killing the upgrade process while it's running

• Upgrade: Use config.content when migrating from Tailwind CSS v3 to Tailwind CSS v4

• Upgrade: Never migrate files that are ignored by git

• Add .env and .env.* to default ignored content files

• Canonicalization: Migrate overflow-ellipsis into text-ellipsis

• Canonicalization: Migrate start-full → inset-s-full, start-auto → inset-s-auto, start-px → inset-s-px, and start-<number> → inset-s-<number> as well as negative versions

• Canonicalization: Migrate end-full → inset-e-full, end-auto → inset-e-auto, end-px → inset-e-px, and end-<number> → inset-e-<number> as well as negative versions

• Canonicalization: Move the - sign inside the arbitrary value -left-[9rem] → left-[-9rem]

• Canonicalization: Move the - sign outside the arbitrary value ml-[calc(-1*var(--width))] → -ml-(--width)

• Improve performance when scanning JSONL / NDJSON files

• Support NODE_PATH environment variable in standalone CLI

Added

• Support Vite 8 in @tailwindcss/vite

Fixed

• Don't crash when candidates contain prototype properties like row-constructor

• Canonicalize calc(var(--spacing)*…) expressions into --spacing(…)

• Fix crash in canonicalization step when handling utilities containing @property at-rules (e.g. shadow-sm border)

• Skip full reload for server only modules scanned by client CSS when using @tailwindcss/vite

• Improve canonicalization for bare values exceeding default spacing scale suggestions (e.g. w-1234 h-1234 → size-1234)

• Fix canonicalization resulting in empty list (e.g. w-5 h-5 size-5 → '' instead of size-5)

Added

• Add mauve, olive, mist, and taupe color palettes to the default theme

• Add @tailwindcss/webpack package to run Tailwind CSS as a webpack plugin

• Add pbs-* and pbe-* utilities for padding-block-start and padding-block-end

• Add mbs-* and mbe-* utilities for margin-block-start and margin-block-end

• Add scroll-pbs-* and scroll-pbe-* utilities for scroll-padding-block-start and scroll-padding-block-end

• Add scroll-mbs-* and scroll-mbe-* utilities for scroll-margin-block-start and scroll-margin-block-end

• Add border-bs-* and border-be-* utilities for border-block-start and border-block-end

• Add inline-*, min-inline-*, max-inline-* utilities for inline-size, min-inline-size, and max-inline-size

• Add block-*, min-block-*, max-block-* utilities for block-size, min-block-size, and max-block-size

• Add inset-s-*, inset-e-*, inset-bs-*, inset-be-* utilities for inset-inline-start, inset-inline-end, inset-block-start, and inset-block-end

• Add font-features-* utility for font-feature-settings

Fixed

• Prevent double @supports wrapper for color-mix values

• Allow whitespace around @source inline() argument

• Emit comment when source maps are saved to files when using @tailwindcss/cli

• Detect utilities containing capital letters followed by numbers

• Fix class extraction for Rails' strict locals

• Align @utility name validation with Oxide scanner rules

• Fix infinite loop when using @variant inside @custom-variant

• Allow multiples of .25 in aspect-* fractions (e.g. aspect-8.5/11)

• Ensure changes to external files listed via @source trigger a full page reload when using @tailwindcss/vite

• Improve performance of Oxide scanner in bigger projects by reducing file system walks

• Ensure import aliases in Astro v5 work without crashing when using @tailwindcss/vite

• Allow escape characters in @utility names to improve support with formatters such as Biome

• Fix incorrect canonicalization results when canonicalizing multiple times

• Add .jj to default ignored content directories

Deprecated

• deprecated

  Deprecate start-* and end-* utilities in favor of inset-s-* and inset-e-* utilities

Fixed

• Ensure validation of source(…) happens relative to the file it is in

• Include filename and line numbers in CSS parse errors

• Skip comments in Ruby files when checking for class names

• Skip over arbitrary property utilities with a top-level ! in the value

• Support environment API in @tailwindcss/vite

• Preserve case of theme keys from JS configs and plugins

• Write source maps correctly on the CLI when using --watch

• Handle special defaults (like ringColor.DEFAULT) in JS configs

• Improve backwards compatibility for content theme key from JS configs

• Upgrade: Handle future and experimental config keys

• Try to canonicalize any arbitrary utility to a bare value

• Validate candidates similarly to Oxide

• Canonicalization: Combine text-* and leading-* classes

• Correctly handle duplicate CLI arguments

• Don’t emit color-mix fallback rules inside @keyframes

• CLI: Don't hang when output is /dev/stdout

Fixed

• Discard candidates with an empty data type

• Fix canonicalization of arbitrary variants with attribute selectors

• Fix invalid colors due to nested &

• Improve canonicalization for & > :pseudo and & :pseudo arbitrary variants

Fixed

• Fix Safari devtools rendering issue due to color-mix fallback

• Suppress Lightning CSS warnings about :deep, :slotted, and :global

• Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins

• Allow named groups in combination with not-*, has-*, and in-*

• Prevent important utilities from affecting other utilities

• Don’t index into strings with the theme(…) function

• Fix parsing issue when \t is used in at-rules

• Upgrade: Canonicalize utilities containing 0 values

• Upgrade: Migrate deprecated break-words to wrap-break-word

Changed

• Remove the postinstall script from oxide

Fixed

• Handle ' syntax in ClojureScript when extracting classes

• Handle @variant inside @custom-variant

• Merge suggestions when using @utility

• Ensure that file system watchers created when using the CLI are always cleaned up

• Do not generate grid-column utilities when configuring grid-column-start or grid-column-end

• Do not generate grid-row utilities when configuring grid-row-start or grid-row-end

• Prevent duplicate CSS when overwriting a static utility with a theme key

• Show Lightning CSS warnings (if any) when optimizing/minifying

• Use default export condition for @tailwindcss/vite

• Re-throw errors from PostCSS nodes

• Detect classes in markdown inline directives

• Ensure files with only @theme produce no output when built

• Support Maud templates when extracting classes

• Upgrade: Do not migrate variant = 'outline' during upgrades

• Upgrade: Show version mismatch (if any) when running upgrade tool

• Upgrade: Ensure first class inside className is migrated

• Upgrade: Migrate classes inside *ClassName and *Class attributes

Changed

• Drop warning from browser build

• Drop exact duplicate declarations when emitting CSS

Fixed

• Don't transition visibility when using transition

• Discard matched variants with unknown named values

• Discard matched variants with non-string values

• Show suggestions for known matchVariant values

• Replace deprecated clip with clip-path in sr-only

• Hide internal fields from completions in matchUtilities

• Ignore .vercel folders by default (can be overridden by @source … rules)

• Consider variants starting with @- to be invalid (e.g. @-2xl:flex)

• Do not allow custom variants to start or end with a - or _ (#18867, #18872)

• Upgrade: Migrate aria theme keys to @custom-variant

• Upgrade: Migrate data theme keys to @custom-variant

• Upgrade: Migrate supports theme keys to @custom-variant

Fixed

• Don't consider the global important state in @apply

• Add missing suggestions for flex-<number> utilities

• Fix trailing ) from interfering with extraction in Clojure keywords

• Detect classes inside Elixir charlist, word list, and string sigils

• Track source locations through @plugin and @config

• Allow boolean values of process.env.DEBUG in @tailwindcss/node

• Ignore consecutive semicolons in the CSS parser

• Center the dropdown icon added to an input with a paired datalist by default

• Extract candidates in Slang templates

• Improve error messages when encountering invalid functional utility names

• Discard CSS AST objects with false or undefined properties

• Allow users to disable URL rebasing in @tailwindcss/postcss via transformAssetUrls: false

• Fix false-positive migrations in addEventListener and JavaScript variable names

• Fix Standalone CLI showing default Bun help when run via symlink on Windows

• Read from --border-color-* theme keys in divide-* utilities for backwards compatibility

• Don't scan .hdr and .exr files for classes by default

Fixed

• Add heuristic to skip candidate migrations inside emit(…)

• Extract candidates with variants in Clojure/ClojureScript keywords

• Document --watch=always in the CLI's usage

• Add support for Vite 7 to @tailwindcss/vite

Fixed

• Correctly parse custom properties with strings containing semicolons

• Upgrade: Migrate arbitrary modifiers without percentage signs to bare values (e.g. /[0.16] → /16)

• Upgrade: Migrate CSS variable shorthands where fallback value contains function call

• Upgrade: Migrate negative arbitrary values to negative bare values (e.g. mb-[-32rem] → -mb-128)

• Upgrade: Do not migrate blur in wire:model.blur

• Don't add spaces around CSS dashed idents when formatting math expressions

Added

• Improve error messages when @apply fails

Fixed

• Upgrade: Do not migrate declarations that look like candidates in <style> blocks (#18057, 18068)

• Upgrade: Don't error when looking for tailwindcss in pnpm monorepos

• Upgrade: Don't error when updating dependencies in pnpm monorepos

• Upgrade: Migrate deprecated order-none to order-0

• Support Leptos class: attributes when extracting classes

• Fix "Cannot read properties of undefined" crash on malformed arbitrary value

• Upgrade: Migrate -mt-[0px] to mt-[0px] instead of the other way around

• Fix Haml pre-processing crash when there is no \n at the end of the file

• Ignore .pnpm-store folders by default (can be overridden by @source … rules)

• Fix PostCSS crash when calling toJSON()

Added

• Upgrade: Migrate bare values to named values

• Upgrade: Added cache to improve template migration performance

Fixed

• Allow _ before numbers during candidate extraction

• Prevent duplicate suggestions when using @theme and @utility together

• Ensure that media queries within ::before and ::after pseudo selectors create valid CSS rules in production builds

• Ensure that the standalone CLI does not leave temporary files behind

• Ensure -rotate-* utilities properly negate arbitrary values

• Ignore custom variants using :merge(…) selectors in legacy JS plugins

• Ensure classes containing . are properly extracted from Clojure files

• Upgrade: Fix error when using @import … source(…)

• Upgrade: Change casing of utilities with named values to kebab-case to match updated theme variables

• Upgrade: Don't migrate strings that match utility names in Vue attribute bindings other than class

Added

• Upgrade: Automatically convert arbitrary values to named values when possible (e.g. h-[1lh] to h-lh) (#17831, #17854)

• Add detailed logging about @source directives, discovered files and scanned files when using DEBUG=* (#17906, #17952)

• Add support for generating source maps in development

Fixed

• Ensure negative arbitrary scale values generate negative values

• Fix HAML extraction with embedded Ruby

• Don't scan files for utilities when using @reference

• Fix incorrectly replacing _ with in arbitrary modifier shorthand bg-red-500/(--my_opacity)

• Don't scan .log files for classes by default

• Ensure that custom utilities applying other custom utilities don't swallow nested @apply rules

• Download platform specific package if optionalDependencies are skipped

Added

• Support using @tailwindcss/upgrade to upgrade between versions of v4.*

• Add h-lh / min-h-lh / max-h-lh utilities

• Transition display, visibility, content-visibility, overlay, and pointer-events when using transition to simplify @starting-style usage

Fixed

• Don't scan .geojson or .db files for classes by default (#17700, #17711)

• Hide default shadow suggestions when missing default shadow theme keys

• Replace _ with . in theme suggestions for @utility if surrounded by digits

• Skip color-mix(…) when opacity is 100%

• PostCSS: Ensure that errors in imported stylesheets are recoverable

• Upgrade: Bump all Tailwind CSS related dependencies during upgrade

• Upgrade: Don't add - to variants starting with @

• Upgrade: Don't format stylesheets that didn't change when upgrading

Added

• Add experimental @tailwindcss/oxide-wasm32-wasi target for running Tailwind in browser environments like StackBlitz

Fixed

• Ensure color-mix(…) polyfills do not cause used CSS variables to be removed

• Ensure color-mix(…) polyfills create fallbacks for theme variables that reference other theme variables

• Fix brace expansion in declining ranges like {10..0..5} and {0..10..-5}

• Work around a Chrome rendering bug when using the skew-* utilities

• Ensure container query variant names can contain hyphens

• Ensure shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit inherit the shadow color

• Ensure compatibility with array tuples used in fontSize JS theme keys

• Ensure folders with binary file extensions in their names are scanned for utilities

• Upgrade: Convert fontSize array tuple syntax to CSS theme variables

Fixed

• Don't rely on the presence of @layer base to polyfill @property

• Support setting multiple inset shadows as arbitrary values

• Fix drop-shadow-* utilities that are defined with multiple shadows

• PostCSS: Fix race condition when two changes are queued concurrently

• PostCSS: Ensure files containing @tailwind utilities are processed

• Ensure the color-mix(…) polyfill creates fallbacks even when using colors that cannot be statically analyzed

• Fix slow incremental builds with @tailwindcss/vite and @tailwindcss/postscss (especially on Windows)

• Vite: Fix missing CSS file in Qwik setups

Added

• Add details-content variant

• Add inverted-colors variant

• Add noscript variant (#11929, #17431)

• Add items-baseline-last and self-baseline-last utilities (#13888, #17476)

• Add pointer-none, pointer-coarse, and pointer-fine variants

• Add any-pointer-none, any-pointer-coarse, and any-pointer-fine variants

• Add safe alignment utilities

• Add user-valid and user-invalid variants

• Add wrap-anywhere, wrap-break-word, and wrap-normal utilities

• Add @source inline(…) and @source not inline(…)

• Add @source not "…"

• Add text-shadow-* utilities

• Add mask-* utilities

• Add bg-{position,size}-* utilities for arbitrary values

• Add shadow-*/<alpha>, inset-shadow-*/<alpha>, drop-shadow-*/<alpha>, and text-shadow-*/<alpha> utilities to control shadow opacity (#17398, #17434)

• Add drop-shadow-<color> utilities

• Improve compatibility with older versions of Safari and Firefox

Fixed

• Follow symlinks when resolving @source directives

• Don't scan ignored files for classes when changing an ignored file triggers a rebuild using @tailwindcss/cli

• Support negated content rules in legacy JavaScript configuration

• Interpret syntax like @("@")md:… as @md:… in Razor files

• Disallow top-level braces, top-level semicolons, and unbalanced parentheses and brackets in arbitrary values

• Ensure the --theme(…) function still resolves to the CSS variables when using legacy JS plugins

• Detect used theme variables in CSS module files (#17433, #17467)

Changed

• Ignore node_modules by default (can be overridden by @source … rules)

• @source rules that include file extensions or point inside node_modules/ folders no longer consider your .gitignore rules

• deprecated

  Deprecate bg-{left,right}-{top,bottom} in favor of bg-{top,bottom}-{left,right} utilities

• deprecated

  Deprecate object-{left,right}-{top,bottom} in favor of object-{top,bottom}-{left,right} utilities

Added

• Add support for literal values in --value('…') and --modifier('…')

Fixed

• Fix class extraction followed by ( in Pug

• Ensure @keyframes for theme animations are emitted if they are referenced following a comma

• Vite: Ensure that updates to an imported CSS file are properly propagated after updating source files

• Pre process Slim templates embedded in Ruby files

• Error when input and output files resolve to the same file when using the CLI

• Add missing suggestions when --spacing(--value(integer, number)) is used

• Add ::-webkit-details-marker pseudo to marker variant

Fixed

• Fix incorrect angle in -bg-conic-* utilities

• Fix border-[12px_4px] being interpreted as a border-color instead of a border-width

• Work around a crash in Safari 16.4 and 16.5 when using the default Preflight styles

• Pre-process <template lang="…"> in Vue files

• Ensure that all CSS variables used by Preflight are prefixed

• Prevent segfault when loaded in a worker thread on Linux

• Ensure multiple --value(…) or --modifier(…) calls don't delete subsequent declarations

• Fix class extraction followed by ( in Slim

• Export PluginUtils from tailwindcss/plugin for compatibility with v3

• Remove redundant line-height: initial from Preflight

• Increase Standalone hardware compatibility on macOS x64 builds

• Ensure that the CSS file rebuilds if a new CSS variable is used from templates

Changed

• The --theme(…) function now returns CSS variables from your theme variables unless used inside positions where CSS variables are invalid (e.g. inside @media queries)

Fixed

• Fix Haml pre-processing

• Ensure .node and .wasm files are not scanned for utilities

• Improve performance when scanning JSON files

• Fix extracting candidates containing dots in Haml, Pug, and Slim pre processors (#17094, #17085, #17113)

• Don't create invalid CSS when encountering a link wrapped in square brackets

Fixed

• Vite: Fix url(…) rebasing in transitively imported CSS files

• PostCSS: Rebase url(…)s in imported CSS files

• Ensure utilities are sorted based on their actual property order

• Ensure strings in Pug and Slim templates are handled correctly

• Ensure classes between } and { are properly extracted

• Fix razor/cshtml pre-processing

• Ensure extracting candidates from JS embedded in a PHP string works as expected

Fixed

• Ensure classes containing -- are extracted correctly

• Ensure classes containing numbers followed by dash or underscore are extracted correctly

• Ensure arbitrary container queries are extracted correctly

• Ensure classes ending in [ are extracted in Slim templating language

• Ensure arbitrary variables with data types are extracted correctly

Added

• Add col-<number> and row-<number> utilities for grid-column and grid-row

Fixed

• Ensure not-* does not remove :is(…) from variants

• Ensure @keyframes are correctly emitted when using a prefix

• Don't swallow @utility declarations when @apply is used in nested rules

• Ensure outline-hidden behaves like outline-none outside of forced colors mode

• Allow !important on CSS variables again

• Vite: Do not crash when encountering an .svg file with # or ? in the filename

• Ensure utilities are properly detected within square brackets

• Ensure utilities are properly detected using Angular's conditional class binding syntax

• Ensure utilities starting with numbers are properly extracted from Slim templates

• Discard arbitrary property candidates that have guaranteed-invalid property names

Changed

• Removed max-w-auto and max-h-auto utilities as they generate invalid CSS

• Replaced the existing candidate extractor with a brand new extractor to improve maintainability, correctness, and performance

Fixed

• Make JS APIs available to plugins and configs in the Standalone CLI

• Vite: Don't crash when importing a virtual module from JavaScript that ends in .css

• Fix an issue where @reference "…" would sometimes omit keyframe animations

• Ensure z-*! utilities are properly marked as !important

• Read UTF-8 CSS files that start with a byte-order mark (BOM)

• Ensure nested functions in selectors used with JavaScript plugins are not truncated

Changed

• Emit variable fallbacks when using @reference "…" instead of duplicate CSS variable declarations

Added

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

Fixed

• Don't add !important to CSS variable declarations when using the important modifier

• Vite: Ignore files and directories specified in your .gitignore file when using automatic source detection

• Vite: Don't rely on the module graph for detecting candidates to ensure setups with multiple Vite builds work as expected

• Vite: Ensure Astro production builds always contain classes used in client-only components

• 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

• Ensure utilities with more declarations are always sorted before utilities with fewer declarations when utilities only define CSS variables

• Only include translate-z-px utilities once in compiled CSS

Changed

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

Fixed

• Export tailwindcss/lib/util/flattenColorPalette.js for backward compatibility

• Fix sorting of numeric utility suggestions when they have different magnitudes

• Show suggestions for fractions in IntelliSense

• Don’t replace _ in suggested theme keys

• Ensure --default-outline-width can be used to change the outline-width value of the outline utility

• Ensure drop shadow utilities don't inherit unexpectedly

• Export config and plugin types from tailwindcss/plugin for backward compatibility

• Ensure JavaScript plugins that emit nested rules referencing the utility name work as expected

• Statically link Visual Studio redistributables in @tailwindcss/oxide Windows builds

• Ensure that Next.js splat routes are scanned for classes

• Pin exact version of tailwindcss in @tailwindcss/* packages

• Upgrade: Report errors when updating dependencies

• Upgrade: Ensure a darkMode JS config setting with block syntax converts to use @slot

• Upgrade: Ensure the latest version of tailwindcss and @tailwindcss/postcss are installed when upgrading

Fixed

• Fix a crash when setting JS theme values to null

• Ensure escaped underscores in CSS variables in arbitrary values are properly unescaped

• Ensure that the containers JS theme key is added to the --container-* namespace

• Ensure theme @keyframes are generated even if an --animation-* variable spans multiple lines

• Vite: Skip parsing stylesheets with the ?commonjs-proxy flag

• Fix order-first and order-last for Firefox

• Fix support for older instruction sets on Linux x64 builds of the standalone CLI

• Ensure NODE_PATH is respected when resolving JavaScript and CSS files

• Ensure Node addons are packaged correctly with FreeBSD builds

• Fix an issue where @variant inside a referenced stylesheet could cause a stack overflow

Fixed

• Only generate positive grid-cols-* and grid-rows-* utilities

• Ensure escaped theme variables are handled correctly

• Ensure we process Tailwind CSS features when only using @reference or @variant

• Refactor gradient implementation to work around prettier/prettier#17058

• Vite: Ensure hot-reloading works with SolidStart setups

• Vite: Fix a crash when starting the development server in SolidStart setups

• Vite: Don't rebase URLs that appear to be aliases

• Vite: Transform <style> blocks in HTML files

• Prevent camel-casing CSS custom properties added by JavaScript plugins

• Do not emit @keyframes in @theme reference

• Discard invalid declarations when parsing CSS

• Do not emit empty CSS rules and at-rules

• Handle @variant when at the top-level of a stylesheet

Added

• Include :open pseudo-class in existing open variant

Fixed

• Remove invalid min-w/h-none utilities

• Discard CSS variable shorthand utilities that don't use valid CSS variables

• Ensure font-size utilities with none modifier have a line-height set e.g. text-sm/none

• Ensure font-size utilities with unknown modifier don't generate CSS

• Don’t suggest font weight utilities more than once

• Suggest container query variants

• Disable bare value suggestions when not using the --spacing variable

• Ensure suggested classes are properly sorted

• Don’t look at .gitignore files outside initialized repos

• Find utilities when using the Svelte class shorthand syntax across multiple lines

• Find utilities when using the Angular class shorthand syntax

• Find utilities when using functions inside arrays

• Ensure that @tailwindcss/browser does not pollute the global namespace

• Ensure that tailwind-merge is not scanned when using the Vite plugin

• Ensure CSS theme variables are available within shadow roots

• Fix crash when project lives in the / directory

• Ensure custom variants have a non-empty selector list

• Upgrade: Ensure JavaScript config files on different drives are correctly migrated

• Upgrade: Migrate leading-[1] to leading-none

• Upgrade: Do not migrate arbitrary leading utilities to bare values

!(https://github.com/user-attachments/assets/cf527dc2-7e42-4884-9628-dbb27459d2aa)

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.