NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #907 most downloaded on npm
A utility-first CSS framework for rapidly building custom user interfaces.
Last release 7 days ago
25 Sep 2026
Ships on a steady schedule
a new release about every 9 days
Nearly every release is documented
notes for 60 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
9 years old
2661 releases · first in 2017
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 quarter.
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
Don’t break sibling-*() functions when used inside calc(…)
sibling-*() functions when used inside calc(…) (#19335)Improve support for raw supports-[…] queries in arbitrary values
supports-[…] queries in arbitrary values (#13605)require.cache error when loaded through a TypeScript file in Node 22.18+ (#18665)import.meta.resolve(…) in configs for new enough Node.js versions (#18938)postcss-load-config for better ESM and TypeScript PostCSS config support with the CLI (#18938)### Fixed - Work around Node v22.12+ issue
Ensure the TypeScript types for PluginsConfig allow undefined values
Bump versions for security vulnerabilities
Don't set display: none on elements that use hidden="until-found"
display: none on elements that use hidden="until-found" (#14625)Improve source glob verification performance
Ensure using @apply with utilities that use @defaults works with rules defined in the base layer when using optimizeUniversalDefaults
@apply with utilities that use @defaults works with rules defined in the base layer when using optimizeUniversalDefaults (#14427)Allow anchor-size(…) in arbitrary values
anchor-size(…) in arbitrary values (#14393)Bump versions of plugins in the Standalone CLI
No longer warns when broad glob patterns are detecting vendor folders
vendor foldersFix minification when using nested CSS
Fix class detection in Slim templates with attached attributes and ID
Fix detection of some utilities in Slim/Pug templates
Disable automatic var() injection for anchor properties
var() injection for anchor properties (#13826)blur(0px) for backdrop-blur-none and blur-none utilities (#13830).mts and .cts config file detection (#13940)px-1 unnecessarily when using utilities like px-1.5 (#13959)-webkit-backdrop-filter for backdrop-* utilities (#13997)Make it possible to use multiple placeholders in a single color definition
<alpha-value> placeholders in a single color definition (#13740)has-*, group-has-*, and peer-has-* variants (#13770){col,row}-{start,end} utilities (#13781)Revert changes to glob handling
Ensure max specificity of 0,0,1 for button and input Preflight rules
0,0,1 for button and input Preflight rules (#12735)(, ), [ or ] in the file path (#12715):has rules when using experimental.optimizeUniversalDefaults (#12736)mix-blend-plus-darker utility (#12923)import.meta.url in config files (#13322)xx-large and remove double x-large absolute size (#13324)@apply a class that uses nesting (#13325)important configuration (#13353)@apply works correctly with pseudo elements (#13379)Don't remove keyframe stops when using important utilities
calc() (#12704)class dark mode strategy (#12717)selector and variant strategies for dark mode (#12717)rtl and ltr variants on same element as dir attribute (#12717)calc() (#12704)class dark mode strategy (#12717)(, ), [ or ] in the file path (#12715)selector and variant strategies for dark mode (#12717)rtl and ltr variants on same element as dir attribute (#12717)Tailwind CSS v3.4 has arrived! Check out the announcement post for a guided tour through all of the highlights.
<a href="https://tailwindcss.com/blog/tailwindcss-v3-4"><img alt="Tailwind CSS" src="https://github.com/tailwindlabs/tailwindcss/assets/882133/cf6ee749-cce4-45e9-b15f-e081a6353833" width="768"></a>
Tailwind CSS v3.4 has arrived! Check out the announcement post for a guided tour through all of the highlights.
svh, lvh, and dvh values to default height/min-height/max-height theme (#11317)has-* variants for :has(...) pseudo-class (#11318)text-wrap utilities including text-balance and text-pretty (#11320, #12031)opacity scale to include all steps of 5 (#11832)html styles to include shadow DOM :host pseudo-class (#11200)grid-rows-* utilities from 1–6 to 1–12 (#12180)size-* utilities (#12287)min-w-*, min-h-*, and max-w-* utilities (#12300)forced-color-adjust utilities (#11931)forced-colors variant (#11694, #12582)appearance-auto utility (#12404)float and clear utilities (#12480)* variant for targeting direct children (#12551)Fix support for container query utilities with arbitrary values
Don’t add spaces to negative numbers following a comma
@config in CSS when watching via the CLI (#12327)resolveConfig (#12272)font-feature-settings for mono are included in Preflight (#12342)@layer rule (#12508)Fix incorrect spaces around - in calc() expression
- in calc() expression (#12283)Improve normalisation of calc()-like functions
calc()-like functions (#11686)calc() normalisation in nested theme() calls (#11705)content optional for presets in TypeScript types (#11730)too many open files error (#12079):not(…) when nested in an at-rule (#12105)Node16 module resolution (#12097)@apply (#12112)tailwindcss/nesting (#12269)jiti, fast-glob, and browserlist dependencies (#11550)var injection for properties that accept a <dashed-ident> (#12236)Fix issue where some pseudo-element variants generated the wrong selector (#10943, #10962, #11111)
theme() inside calc() when there are no spaces around operators (#11157)repeating-conic-gradient is detected as an image (#11180):is by default (#11345)group and peer variants (#11454)aria-busy utility (#10966)<dialog> elements in preflight (#11069)Don’t move unknown pseudo-elements to the end of selectors (#10943, #10962)
to position of gradient when using implicit transparent colors (#11002)@tailwindcss/oxide doesn't leak in the stable engine (#10988)theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)Fix edge case bug when loading a TypeScript config file with webpack
@apply, and important selectors when using :is() or :has() with pseudo-elements (#10903)safelist config types (#10901)@tailwindcss/line-clamp warning (#10915, #10919)Tailwind CSS v3.3 is here! Check out the announcement post for a deep dive into all of the cool new stuff.
<img alt="Tailwind CSS" src="https://user-images.githubusercontent.com/4323180/228304008-d10fbe12-08eb-4270-bda2-7e8c1254f44c.png" width="768">
Tailwind CSS v3.3 is here! Check out the announcement post for a deep dive into all of the cool new stuff.
line-height modifier support to font-size utilities (#9875)var(...) (#9880, #9962)hyphens utilities (#10071)from-{position}, via-{position} and to-{position} utilities (#10886)list-style-image utilities (#10817)caption-side utilities (#10470)line-clamp utilities from @tailwindcss/line-clamp to core (#10768, #10876, #10862)delay-0 and duration-0 utilities (#10294)justify-normal and justify-stretch utilities (#10560)content-normal and content-stretch utilities (#10645)whitespace-break-spaces utility (#10729)font-variation-settings for a font-family (#10034, #10515)null, is an empty Set (#10877)Your coding agent can read these notes before it upgrades. Set up the MCP server →