v4.0.0-beta.1

About eight months ago we open-sourced our progress on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I'm excited to finally tag the first public beta release.

As I talked about when we published the first alpha, Tailwind CSS v4.0 is an all-new engine built for performance, and designed for the modern web.

• Built for performance — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
• Unified toolchain — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
• CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
• Designed for the modern web — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.

There's so much more to say, but everything you need to get started is in the new beta documentation we published today:

Get started with Tailwind CSS v4.0 Beta 1 →

Start building and help us bullet-proof this thing for the stable release early in the new year.

v4.0.0-alpha.36

Added

• Add consistent base styles for buttons and form controls (#15036)
• Upgrade (experimental): Convert group-[]:flex to in-[.group]:flex (#15054)
• Upgrade (experimental): Add form reset styles to CSS files for compatibility with v3 (#15036)
• Upgrade (experimental): Migrate ring to ring-3 (#15063)

Fixed

• Upgrade (experimental): Ensure migrating to the in-* requires a descendant selector (#15054)

Changed

• Use single drop shadow values instead of multiple (#15056)
• Do not parse invalid candidates with empty arbitrary values (#15055)

v4.0.0-alpha.35

Added

• Reintroduce max-w-screen-* utilities that read from the --breakpoint namespace as deprecated utilities (#15013)
• Support using CSS variables as arbitrary values without var(…) by using parentheses instead of square brackets (e.g. bg-(--my-color)) (#15020)
• Add new in-* variant (#15025)
• Bundle @tailwindcss/forms, @tailwindcss/typography, and @tailwindcss/aspect-ratio with the standalone CLI (#15028)
• Allow addUtilities() and addComponents() to work with child combinators and other complex selectors (#15029)
• Support colors that use <alpha-value> in JS configs and plugins (#15033)
• Add new transition-discrete and transition-normal utilities for transition-behavior (#15051)
• Upgrade (experimental): Migrate [&>*] to the * variant (#15022)
• Upgrade (experimental): Migrate [&_*] to the ** variant (#15022)
• Upgrade (experimental): Warn when trying to migrating a project that is not on Tailwind CSS v3 (#15015)
• Upgrade (experimental): Migrate colors that use <alpha-value> in JS configs (#15033)

Fixed

• Ensure flex is suggested (#15014)
• Improve module resolution for cjs-only and esm-only plugins (#15041)
• Perform calc(…) on just values for negative -rotate-* utilities, not on the rotateX/Y/Z(…) functions themselves (#15044)
• Upgrade (experimental): Resolve imports when specifying a CSS entry point on the command-line (#15010)
• Upgrade (experimental): Resolve nearest Tailwind config file when CSS file does not contain @config (#15001)
• Upgrade (experimental): Improve output when CSS imports can not be found (#15038)
• Upgrade (experimental): Ignore analyzing imports with external URLs (e.g.: @import "https://fonts.google.com") (#15040)
• Upgrade (experimental): Ignore analyzing imports with url(…) (e.g.: @import url("https://fonts.google.com")) (#15040)
• Upgrade (experimental): Use resolveJsId when resolving tailwindcss/package.json (#15041)
• Upgrade (experimental): Ensure children of Tailwind root file are not considered Tailwind root files (#15048)

Changed

• Bring back support for color opacity modifiers to read from --opacity-* theme values (#14278)

v4.0.0-alpha.34

Added

• Support opacity values in increments of 0.25 by default (#14980)
• Support specifying the color interpolation method for gradients via modifier (#14984)
• Reintroduce container component as a utility (#14993, #14999)
• Upgrade (experimental): Migrate container component configuration to CSS (#14999)

Fixed

• Ensure that CSS inside Svelte <style> blocks always run the expected Svelte processors when using the Vite extension (#14981)
• Upgrade (experimental): Ensure it's safe to migrate blur, rounded, or shadow (#14979)
• Upgrade (experimental): Do not rename classes using custom defined theme values (#14976)
• Upgrade (experimental): Ensure @config is injected in nearest common ancestor stylesheet (#14989)
• Upgrade (experimental): Add missing layer(…) to imports above Tailwind directives (#14982)

v3.4.15

• Bump versions for security vulnerabilities (#14697)
• Ensure the TypeScript types for the boxShadow theme configuration allows arrays (#14856)
• Set fallback for opacity variables to ensure setting colors with the selection:* variant works in Chrome 131 (#15003)

v4.0.0-alpha.33

Fixed

• Don't reset horizontal padding on date/time pseudo-elements (#14959)
• Don't emit calc() with invalid values for bare values that aren't integers in spacing utilities (#14962)
• Ensure spacing scale values work as line-height modifiers (#14966)

v4.0.0-alpha.32

Added

• Support derived spacing scales based on a single --spacing theme value (#14857)
• Add svh, dvh, svw, dvw, and auto values to all width/height/size utilities (#14857)
• Add new ** variant (#14903)
• Process <style> blocks inside Svelte files when using the Vite extension (#14151)
• Normalize date/time input styles in Preflight (#14931)
• Upgrade (experimental): Migrate grid-cols-[subgrid] and grid-rows-[subgrid] to grid-cols-subgrid and grid-rows-subgrid (#14840)
• Upgrade (experimental): Support migrating projects with multiple config files (#14863)
• Upgrade (experimental): Rename shadow to shadow-sm, shadow-sm to shadow-xs, and shadow-xs to shadow-2xs (#14875)
• Upgrade (experimental): Rename inset-shadow to inset-shadow-sm, inset-shadow-sm to inset-shadow-xs, and inset-shadow-xs to inset-shadow-2xs (#14875)
• Upgrade (experimental): Rename drop-shadow to drop-shadow-sm and drop-shadow-sm to drop-shadow-xs (#14875)
• Upgrade (experimental): Rename rounded to rounded-sm and rounded-sm to rounded-xs (#14875)
• Upgrade (experimental): Rename blur to blur-sm and blur-sm to blur-xs (#14875)
• Upgrade (experimental): Migrate theme() usage and JS config files to use the new --spacing multiplier where possible (#14905)
• Upgrade (experimental): Migrate arbitrary values in variants to built-in values where possible (#14841)

Fixed

• Detect classes in new files when using @tailwindcss/postcss (#14829)
• Fix crash when using @source containing .. (#14831)
• Ensure instances of the same variant with different values are always sorted deterministically (e.g. data-focus:flex and data-active:flex) (#14835)
• Ensure --inset-ring=* and --inset-shadow-* variables are ignored by inset-* utilities (#14855)
• Ensure url(…) containing special characters such as ; or {} end up in one declaration (#14879)
• Ensure adjacent rules are merged together after handling nesting when generating optimized CSS (#14873)
• Rebase url() inside imported CSS files when using Vite (#14877)
• Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. :deep() in Vue) (#14871)
• Ensure the CSS theme() function handles newlines and tabs in its arguments list (#14917)
• Don't unset keys like --inset-shadow-* when unsetting keys like --inset-* (#14906)
• Ensure spacing utilities with no value (e.g. px or translate-y) don't generate CSS (#14911)
• Don't override user-agent background color for input elements in Preflight (#14913)
• Don't attempt to convert CSS variables (which should already be percentages) to percentages when used as opacity modifiers (#14916)
• Ensure custom utilities registered with the plugin API can start with @ (#14793)
• Upgrade (experimental): Install @tailwindcss/postcss next to tailwindcss (#14830)
• Upgrade (experimental): Remove whitespace around , separator when print arbitrary values (#14838)
• Upgrade (experimental): Fix crash during upgrade when content globs escape root of project (#14896)
• Upgrade (experimental): Don't convert theme(…/15%) to modifier unless it is the entire arbitrary value of a utility (#14922)
• Upgrade (experimental): Convert , to in arbitrary grid-cols-*, grid-rows-*, and object-* values (#14927)

Changed

• Remove --drop-shadow-none from the default theme in favor of a static drop-shadow-none utility (#14847)
• Rename shadow to shadow-sm, shadow-sm to shadow-xs, and shadow-xs to shadow-2xs (#14849)
• Rename inset-shadow to inset-shadow-sm, inset-shadow-sm to inset-shadow-xs, and inset-shadow-xs to inset-shadow-2xs (#14849)
• Rename drop-shadow to drop-shadow-sm and drop-shadow-sm to drop-shadow-xs (#14849)
• Rename rounded to rounded-sm and rounded-sm to rounded-xs (#14849)
• Rename blur to blur-sm and blur-sm to blur-xs (#14849)
• Remove fixed line-height theme values and derive leading-* utilites from --spacing-* scale (#14857)
• Remove --transition-timing-function-linear from the default theme in favor of a static ease-linear utility (#14880)
• Remove default --spacing-* scale in favor of --spacing multiplier (#14857)
• Remove var(…) fallbacks from theme values in utilities (#14881)
• Remove static font-weight utilities and add --font-weight-* values to the default theme (#14883)
• Rename --transition-timing-function-* variables to --ease-* (#14886)
• Rename --width-* variables to --container-* (#14898)
• Rename --font-size-* variables to --text-* (#14909)
• Rename --font-family-* variables to --font-* (#14885)
• Rename --letter-spacing-* variables to --tracking-* (#14921)
• Rename --line-height-* variables to --leading-* (#14925)
• Revert specificity of * variant to match v3 behavior (#14920)
• Replace outline-none with outline-hidden, add new simplified outline-none utility (#14926)
• Revert adding borders by default to form inputs (#14929)
• Deprecate shadow-inner utility (#14933)
• Remove --leading-none from the default theme in favor of a static leading-none utility (#14934)

v4.0.0-alpha.31

Added

• Support specifying the base path for automatic source detection using a source(…) function on @tailwind utilities or @import "tailwindcss" (#14820)
• Support disabling automatic source detection with source(none) (#14820)
• Support passing directories to @source without needing to pass a complete glob (#14820)
• Upgrade (experimental): Bump prettier-plugin-tailwindcss to latest version during upgrade (#14808)

Fixed

• Support calling config() with no arguments in plugin API (#14799)

Changed

• Use logical *-inline and *-block properties for all x/y utilities like px-*, my-*, scroll-px-*, and inset-y-* (#14805)
• Respect automatic source detection heuristics in sources registered with @source (#14820)

v4.0.0-alpha.30

Added

• Support not-* with all built-in media query and supports-* variants (#14743)
• Support not-* with custom variants containing at-rules (#14743)
• Support group-*, peer-*, and has-* with custom variants containing multiple, non-nested style rules (#14743)

Fixed

• Ensure individual logical property utilities are sorted later than left/right pair utilities (#14777)
• Don't migrate important modifiers inside conditional statements in Vue and Alpine (e.g. <div v-if="!border" />) (#14774)
• Ensure third-party plugins with exports in their package.json are resolved correctly (#14775)
• Ensure underscores in the url() function are never unescaped (#14776)
• Ensure complex variants are displayed correctly in IntelliSense completions (#14743)
• Upgrade (experimental): Ensure @import statements for relative CSS files are actually migrated to use relative path syntax (#14769)
• Upgrade (experimental): Only generate Preflight compatibility styles when Preflight is used (#14773)
• Upgrade (experimental): Don't escape underscores when printing theme values migrated to CSS variables in arbitrary values (e.g. m-[var(--spacing-1_5)] instead of m-[var(--spacing-1\_5)]) (#14778)
• Upgrade (experimental): Ensure layer(…) on @import is only removed when @utility is present (#14783)

Changed

• Don't convert underscores in the first argument to var() and theme() to spaces (#14776, #14781)
• Sort text alignment and wrapping utilities with typography utilities (#14787)
• Sort line height and letter spacing utilities before text color utilities (#14787)

v4.0.0-alpha.29

Added

• Upgrade (experimental): Migrate plugins with options to CSS (#14700)
• Upgrade (experimental): Allow JS configuration files with corePlugins options to be migrated to CSS (#14742)
• Upgrade (experimental): Migrate @import statements for relative CSS files to use relative path syntax (e.g. ./file.css) (#14755)
• Upgrade (experimental): Migrate max-w-screen-* utilities to max-w-[var(…)](#14754)
• Upgrade (experimental): Migrate @variants and @responsive directives (#14748)
• Upgrade (experimental): Migrate @screen directive (#14749)
• Upgrade (experimental): Generate compatibility styles for legacy default border color (#14746)
• Upgrade (experimental): Generate compatibility styles for legacy default border width on form elements (#14746)

Fixed

• Allow spaces spaces around operators in attribute selector variants (#14703)
• Ensure color opacity modifiers work with OKLCH colors (#14741)
• Ensure changes to the input CSS file result in a full rebuild (#14744)
• Add postcss as a dependency of @tailwindcss/postcss (#14750)
• Ensure the JS theme() function can reference CSS theme variables that contain special characters without escaping them (e.g. referencing --width-1\/2 as theme('width.1/2')) (#14739)
• Ensure JS theme keys containing special characters correctly produce utility classes (e.g. '1/2': 50% to w-1/2) (#14739)
• Always emit keyframes registered in addUtilities (#14747)
• Ensure loading stylesheets via the ?raw and ?url static asset query works when using the Vite plugin (#14716)
• Upgrade (experimental): Migrate flex-grow to grow and flex-shrink to shrink (#14721)
• Upgrade (experimental): Minify arbitrary values when printing candidates (#14720)
• Upgrade (experimental): Ensure legacy theme values ending in 1 (like theme(spacing.1)) are correctly migrated to custom properties (#14724)
• Upgrade (experimental): Migrate arbitrary values to bare values for the from-*, via-*, and to-* utilities (#14725)
• Upgrade (experimental): Ensure layer(utilities) is removed from @import to keep @utility top-level (#14738)
• Upgrade (experimental): Ensure JS theme keys with special characters are escaped when migrated to CSS variables (#14736)
• Upgrade (experimental): Don't migrate important modifiers that are actually logical negations (e.g. let foo = !border to let foo = border!) (#14737)

Changed

• Require a relative path prefix for importing relative CSS files (e.g. @import './styles.css' instead of @import 'styles.css') (#14755)
• Upgrade (experimental): Don't create @source rules for content paths that are already covered by automatic source detection (#14714)