NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1415 most downloaded on npm
A utility-first CSS framework for rapidly building custom user interfaces.
Last release 9 days ago
25 Sep 2026
Ships on a steady schedule
a new release about every 9 days
Nearly every release is documented
notes for 46 of 46 stable releases
Nothing withdrawn
no release was ever pulled
3 years old
931 releases · first in 2024
Support derived spacing scales based on a single --spacing theme value
--spacing theme value (#14857)svh, dvh, svw, dvw, and auto values to all width/height/size utilities (#14857)** variant (#14903)<style> blocks inside Svelte files when using the Vite extension (#14151)grid-cols-[subgrid] and grid-rows-[subgrid] to grid-cols-subgrid and grid-rows-subgrid (#14840)shadow to shadow-sm, shadow-sm to shadow-xs, and shadow-xs to shadow-2xs (#14875)inset-shadow to inset-shadow-sm, inset-shadow-sm to inset-shadow-xs, and inset-shadow-xs to inset-shadow-2xs (#14875)drop-shadow to drop-shadow-sm and drop-shadow-sm to drop-shadow-xs (#14875)rounded to rounded-sm and rounded-sm to rounded-xs (#14875)blur to blur-sm and blur-sm to blur-xs (#14875)theme() usage and JS config files to use the new --spacing multiplier where possible (#14905)@tailwindcss/postcss (#14829)@source containing .. (#14831)data-focus:flex and data-active:flex) (#14835)--inset-ring=* and --inset-shadow-* variables are ignored by inset-* utilities (#14855)url(…) containing special characters such as ; or {} end up in one declaration (#14879)url() inside imported CSS files when using Vite (#14877):deep() in Vue) (#14871)theme() function handles newlines and tabs in its arguments list (#14917)--inset-shadow-* when unsetting keys like --inset-* (#14906)px or translate-y) don't generate CSS (#14911)@ (#14793)@tailwindcss/postcss next to tailwindcss (#14830), separator when print arbitrary values (#14838)theme(…/15%) to modifier unless it is the entire arbitrary value of a utility (#14922), to in arbitrary grid-cols-*, grid-rows-*, and object-* values (#14927)--drop-shadow-none from the default theme in favor of a static drop-shadow-none utility (#14847)shadow to shadow-sm, shadow-sm to shadow-xs, and shadow-xs to shadow-2xs (#14849)inset-shadow to inset-shadow-sm, inset-shadow-sm to inset-shadow-xs, and inset-shadow-xs to inset-shadow-2xs (#14849)drop-shadow to drop-shadow-sm and drop-shadow-sm to drop-shadow-xs (#14849)rounded to rounded-sm and rounded-sm to rounded-xs (#14849)blur to blur-sm and blur-sm to blur-xs (#14849)leading-* utilites from --spacing-* scale (#14857)--transition-timing-function-linear from the default theme in favor of a static ease-linear utility (#14880)--spacing-* scale in favor of --spacing multiplier (#14857)var(…) fallbacks from theme values in utilities (#14881)font-weight utilities and add --font-weight-* values to the default theme (#14883)--transition-timing-function-* variables to --ease-* (#14886)--width-* variables to --container-* (#14898)--font-size-* variables to --text-* (#14909)--font-family-* variables to --font-* (#14885)--letter-spacing-* variables to --tracking-* (#14921)--line-height-* variables to --leading-* (#14925)* variant to match v3 behavior (#14920)outline-none with outline-hidden, add new simplified outline-none utility (#14926)shadow-inner utility (#14933)--leading-none from the default theme in favor of a static leading-none utility (#14934)One column per month.
Support specifying the base path for automatic source detection using a source(…) function on @tailwind utilities or @import "tailwindcss"
source(…) function on @tailwind utilities or @import "tailwindcss" (#14820)source(none) (#14820)@source without needing to pass a complete glob (#14820)prettier-plugin-tailwindcss to latest version during upgrade (#14808)config() with no arguments in plugin API (#14799)Support not-* with all built-in media query and supports-* variants
not-* with all built-in media query and supports-* variants (#14743)not-* with custom variants containing at-rules (#14743)group-*, peer-*, and has-* with custom variants containing multiple, non-nested style rules (#14743)<div v-if="!border" />) (#14774)exports in their package.json are resolved correctly (#14775)url() function are never unescaped (#14776)@import statements for relative CSS files are actually migrated to use relative path syntax (#14769)m-[var(--spacing-1_5)] instead of m-[var(--spacing-1\_5)]) (#14778)layer(…) on @import is only removed when @utility is present (#14783)_Upgrade (experimental)_: Migrate plugins with options to CSS
plugins with options to CSS (#14700)corePlugins options to be migrated to CSS (#14742)@import statements for relative CSS files to use relative path syntax (e.g. ./file.css) (#14755)max-w-screen-* utilities to max-w-[var(…)](#14754)@variants and @responsive directives (#14748)@screen directive (#14749)postcss as a dependency of @tailwindcss/postcss (#14750)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)'1/2': 50% to w-1/2) (#14739)addUtilities (#14747)?raw and ?url static asset query works when using the Vite plugin (#14716)flex-grow to grow and flex-shrink to shrink (#14721)1 (like theme(spacing.1)) are correctly migrated to custom properties (#14724)from-*, via-*, and to-* utilities (#14725)layer(utilities) is removed from @import to keep @utility top-level (#14738)let foo = !border to let foo = border!) (#14737)Add first draft of new wide-gamut color palette
theme(…) calls to var(…) or to the modern theme(…) syntax (#14664, #14695)theme object (#14675)theme values defined outside of extend in JS configuration files overwrite all existing values for that namespace (#14672)screens config (#14691)Add support for tailwindcss/colors.js, tailwindcss/defaultTheme.js, and tailwindcss/plugin.js exports
tailwindcss/colors.js, tailwindcss/defaultTheme.js, and tailwindcss/plugin.js exports (#14595)keyframes in JS config file themes (#14594)color parameter in JS theme configuration callbacks (#14651)theme() function (#14659)@config "…" when a tailwind.config.{js,ts,…} is detected (#14635)@media screen(…) when running codemods (#14603)aria-*, data-*, and supports-* variants from arbitrary values to bare values (#14644)!important when stringifying CSS (#14611)display: none on elements that use hidden="until-found" (#14631)theme() function resolves to the right value in some compatibility situations (#14614)matchUtilities (#14589)addComponents and matchComponents (#14590)boxShadow and animation theme keys in JS config files are accessible under --shadow-* and --animate-* using the theme() function (#14642)theme() function with the legacy dot notation syntax (#14642)var(…) can be used as the opacity value inside the theme([path] / [modifier]) function (#14653)font-stretch utilities only accepts positive integer bare values (#14670)Expose timing information in debug mode
blocklist in JS config files (#14556)color-scheme utilities (#14567)important option in JS config files (#14448)@import "tailwindcss/tailwind.css" to @import "tailwindcss" in CSS files (#14514)@apply in CSS files (#14574)bg-gradient-* utilities to bg-linear-* in template files (#14537)var(…) in template files (#14526)@utility is top-level and cannot be nested (#14525)@tailwindcss/postcss for initial builds (#14565)@apply and CSS functions work inside imported stylesheets (#14576)layer() to @import at-rules when the styles do not need to be imported into a layer (#14513)@layer when running codemods (#14517)@tailwind rules is wrapped with @layer base when prepending @import "tailwindcss" to the top of the file (#14536)Add support for aria, supports, and data variants defined in JS config files
aria, supports, and data variants defined in JS config files (#14407)@tailwindcss/upgrade tooling (#14434)screens in JS config files (#14415)bg-radial-* and bg-conic-* utilities for radial and conic gradients (#14467)shadow-initial and inset-shadow-initial utilities for resetting shadow colors (#14468)field-sizing-* utilities (#14469)@apply (#14411)@tailwind directives (#14411, #14504)@layer utilities and @layer components (#14455)borderRadius.* as an alias for --radius-* when using dot notation inside the theme() function (#14436)anchor-size(…) in arbitrary values (#14394)theme() calls (#14437)inset-* utilities for --inset-shadow-* and --inset-ring-* theme values (#14447)--default-transition-* variables in transition-* utility output (#14482)rtl and ltr variants work with [dir=auto] (#14306)leading-*, tracking-*, and font-{weight} value when overriding font-size (#14403)@import resolution to speed up initial builds (#14446)var(…) injection (#13657):hover states on devices that support @media (hover: hover) (#14500)aria, supports, and data variants defined in JS config files (#14407)@tailwindcss/upgrade tooling (#14434)screens in JS config files (#14415)bg-radial-* and bg-conic-* utilities for radial and conic gradients (#14467)shadow-initial and inset-shadow-initial utilities for resetting shadow colors (#14468)field-sizing-* utilities (#14469)@apply in CSS files (#14411)@tailwind directives to @import rules in CSS files (#14411, #14504)@layer utilities and @layer components to use @utility in CSS files (#14455)borderRadius.* as an alias for --radius-* when using dot notation inside the theme() function (#14436)anchor-size(…) in arbitrary values (#14394)theme() calls (#14437)inset-* utilities for --inset-shadow-* and --inset-ring-* theme values (#14447)--default-transition-* variables in transition-* utility output (#14482)rtl and ltr variants work with [dir=auto] (#14306)leading-*, tracking-*, and font-{weight} value when overriding font-size (#14403)@import resolution to speed up initial builds (#14446)var(…) injection (#13657):hover states on devices that support @media (hover: hover) (#14500)Support CSS theme() functions inside other @custom-media, @container, and @supports rules
theme() functions inside other @custom-media, @container, and @supports rules (#14358)Config type from tailwindcss for JS config files (#14360)matchVariant plugins using the @plugin directive (#14371)tailwindcss package is used as a PostCSS plugin (#14378)theme('someKey.DEFAULT') when all --some-key-* keys have a suffix (#14354)@theme default values (#14359)border utilities (#14370)Add opacity modifier support to the theme() function in plugins
theme() function in plugins (#14348)Support TypeScript for @plugin and @config files
@plugin and @config files (#14317)default option to @theme to support overriding default theme values from plugins/JS config files (#14327)<style> tags in Astro files to the Vite plugin (#14340)@config files are relative to that file (#14314)theme() functions are evaluated in media query ranges with collapsed whitespace (#14321)reference values don't generate stale CSS variables (#14327)--default-font-* and --default-mono-font-* variables respect theme customizations in JS config files (#14344)Add new standalone builds of Tailwind CSS v4
@config (#14239)@plugin (#14264)css.transformer set to lightningcss (#14269)@tailwindcss/postcss (#14256)theme() function when using plugins (#14262)theme() function (#14262)tailwindcss/defaultTheme (#14257)build --watch (#14269)Add support for addBase plugins using the @plugin directive
addBase plugins using the @plugin directive (#14172)tailwindcss/plugin export (#14173)theme() function in plugins (#14207)addComponents, matchComponents, prefix plugin APIs (#14221)tailwindcss/colors and tailwindcss/defaultTheme exports for use with plugins (#14221)@tailwindcss/typography and @tailwindcss/forms plugins (#14221)theme() function in CSS and class names (#14177):is(…) (#14203)Add support for inline option when defining @theme values
inline option when defining @theme values (#14095)inert variant (#14129)@source at-rule (#14078)<style> tags in Vue files to the Vite plugin (#14158)addUtilities and matchUtilities plugins using the @plugin directive (#14114)@apply works inside @utility (#14144)Add support for basic addVariant plugins with new @plugin directive (#13982, #14008)
addVariant plugins with new @plugin directive (#13982, #14008)@variant at-rule for defining custom variants in CSS (#13992, #14008)@utility at-rule for defining custom utilities in CSS (#14044)bg-red-[#000] (#13970)color-mix() (#13972)variants and utilities with modifiers (#13977)resize, fill-none, accent-none, drop-shadow-none, and negative hue-rotate and backdrop-hue-rotate utilities (#13971)data-* and aria-* modifiers are always quoted in the generated CSS (#14040)* variant so those styles can be overridden by child elements (#14056)Add backdrop-blur-none and blur-none utilities
Add bg-linear-* utilities as an alias for the existing bg-gradient-* utilities
nth-* variants (#13661)bg-linear-* utilities as an alias for the existing bg-gradient-* utilities (#13783)bg-linear-[125deg]) (#13783)length data type for background-size instead of background-position (#13771){col,row}-{start,end} utilities (#13780)<length> | <percentage> syntax for properties (#13660)bg-right-top, bg-right-bottom, bg-left-bottom and bg-left-top (#13806)Make sure contain-* utility variables resolve to a valid value
Ensure deterministic SSR builds in @tailwindcss/vite
Always inline values for shadow-* utilities to ensure shadow colors work correctly
shadow-* utilities to ensure shadow colors work correctly (#13449)Enable Vite's waitForRequestsIdle() for client requests only
Make rotate-x/y/z-* utilities composable
rotate-x/y/z-* utilities composable (#13319)@tailwindcss/vite (e.g. inlining images) (#13218)starting variant for @starting-style (#13329):popover-open in existing open variant (#13331)translate-z utilities (#13321, #13327)@tailwindcss/vite when Tailwind-generated CSS changes (#13218)build command is executed when using --output instead of -o (#13369)@tailwindcss/vite from hanging in serve mode (#13380)Add inherit as a universal color
Support @theme reference { … } for defining theme values without emitting variables
@theme reference { … } for defining theme values without emitting variables (#13222)--default-transition-* variables in transition-* utilities (#13219)optimizeCss to the packages where it's used (#13230)Ensure scale-* utilities support percentage values
scale-* utilities support percentage values (#13182)content-none from being overridden when conditionally styling ::before/::after (#13187)iframe elements (#13189)--radius-none and --radius-full theme values with static rounded-none and rounded-full utilities (#13186)Publish packages with npm provenance
Only set border-style for appropriate border side
Don't scan ignored files even if a .git folder is not present
.git folder is not present (#13119)Support importing framework CSS files without including a .css extension
.css extension (#13110)Drop deprecated decoration-slice and decoration-clone utilities
Move the CLI into a separate @tailwindcss/cli package
@tailwindcss/cli package (#13095)- First 4.0.0-alpha.1 release
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →