All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
- in calc() expression (#12283)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)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)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)@apply, and important selectors when using :is() or :has() with pseudo-elements (#10903)safelist config types (#10901)@tailwindcss/line-clamp warning (#10915, #10919)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)rtl and ltr variants as stable and remove warnings (#10764)inset instead of top, right, bottom, and left properties (#10765)dark and rtl/ltr variants insensitive to DOM order (#10766):is to make important selector option insensitive to DOM order (#10835):where(.btn) when matching !btn (#10601)outline-color in transition and transition-colors by default (#10604)oxide-api-shim (add1636)node16-win-arm64) (#10001)variantOrder (#9829)foo-[abc]/[def] not being handled correctly (#9866)resolveConfig, unwrap ResolvableTo (#9972)data key to theme types (#10023)string[] in the theme.dropShadow types (#10072)root or @layer nodes (#10229)blocklist member in the Config type (#10239)layer inside variants layer (#10505)--watch=always option to prevent exit when stdin closes (#9966)theme keys in default config (#9953)outline-color in transition and transition-colors utilities (#10385)blocklist option to prevent generating unwanted CSS (#9812)raw content in the CLI (#9773)@apply (#9765)!) (#9791)font-feature-settings are included in Preflight (#9707)@apply in selectors with combinators and pseudos (#9722)supports in types (#9616)micromatch is a proper CLI dependency (#9620)modifiers object for matchVariant (ba6551d)@config directive (#9405)relative: true option to resolve content paths relative to the config file (#9396)supports-* variant (#9453)min-* and max-* variants (#9558)aria-* variants (#9557, #9588)data-* variants (#9559, #9588)break-keep utility for word-break: keep-all (#9393)collapse utility for visibility: collapse (#9181)fill-none utility for fill: none (#9403)stroke-none utility for stroke: none (#9403)place-content-baseline utility for place-content: baseline (#9498)place-items-baseline utility for place-items: baseline (#9507)content-baseline utility for align-content: baseline (#9507)font-feature-settings for a font family (#9039)node16-linux-armv7) (#9084)outline-offset (#9136)matchUtilities (#9541)min/max/clamp (#9237)sort function in matchVariant (#9423)postcss-nested v6.0 (#9546)respectDefaultRingColorOpacity (#9070)@apply-ing a selector with joined classes (#9107)outline-hidden utility (#9147)hidden attribute on elements in preflight (#9174)fontFamily config TypeScript types (#9214):where() and :has() (#9309)null or undefined) when resolving the classList for intellisense (#9385)content key in custom plugin configs (#9502, #9545)--content is used in the CLI when passed (#9587)@apply of user utilities when negative and non-negative versions both exist (#9027)@layer rules (#8971)resolveConfig (#8924)font-weight for each font size utility (#8763)tailwindcss and autoprefixer in postcss.config.js in standalone CLI (#8769)<alpha-value> when using theme() (#8652)/ that are preceded by numbers (#8688)corePluginList type definition (#8587)addVariant (#8608)theme() function when using quotes (#8625)::marker (#8622)\ is a valid arbitrary variant token (#8576)postcss-import in the CLI by default in watch mode (#8574, #8580)::backdrop into separate defaults group (#8567)@apply (#8125)@apply rules (#8213)[hidden] style in preflight (#8248)important selector to the front when @apply-ing selector-modifying variants in custom utilities (#8313)matchVariant that use at-rules and placeholders (#8392)tailwindcss/plugin (#8400)addVariant or matchVariant callback functions (#8455)postcss installation first in the CLI (#8270)to value from parent gradients (#8489)@import 'tailwindcss/...' without node_modules (#8537)Document nodes (#7291)text-start and text-end utilities (#6656)darkMode: 'class' (#5800)--poll option to the CLI (#7725)border-spacing utilities (#7102)enabled variant (#7905)tailwind.config.js file (#7891)backdrop variant (#7924, #8526)grid-flow-dense utility (#8193)mix-blend-plus-lighter utility (#8288)matchVariant API (#8310, 34fd0fb8)prefers-contrast media query variants (#8410)theme function (#8416)postcss-import support to the CLI (#8437)optional variant (#8486)<alpha-value> placeholder support for custom colors (#8501)@apply (#7524)! to selector class matching template candidate when using important modifier with multi-class selectors (#7664)div:not(.foo) if .foo is never defined (#7815)rgb, rgba, hsl and hsla colors (#7933)percentage data type is validated correctly (#8015)font-weight is inherited by form controls in all browsers (#8078)chalk with picocolors (#6039)cosmiconfig with lilconfig (#6039)cssnano to avoid removing empty variables when minifying (#7818):visited pseudo class (#7458)getClassOrder instead of sortClassList (#7459)postcss to dependencies (#7424)context.sortClassList(classes) (#7412)@apply order regression (in addComponents, addUtilities, …) (#7232)--content option (#7220)linuxstatic build target (#6914)@apply works consistently with or without @layer (#6938)experimental.optimizeUniversalDefaults to only work with @tailwind base (#6926)@apply in files without @tailwind directives (#6580, #6875)DEBUG flag (#6797, #6804)< and > characters in modifiers (#6851)theme() works in arbitrary values (#6852)theme() value usage in arbitrary properties (#6854)TAILWIND_MODE=watch (#6858)abbr rule in preflight (#6671)node16-linux-arm64 target for standalone CLI (#6693)@apply (#6588)user layers (#6589)@apply of a rule inside an AtRule works (#6594)li to list-style reset (9777562d)content (#6449)li to list-style reset (00f60e6)@apply-able in CSS modules/Svelte components/Vue components (#6461)default interop to public available functions (#6348)@apply (#6365)before and after) (#6018)placeholder variant (#6106)touch-action utilities (#6115)portrait and landscape variants (#6046)text-decoration-style, text-decoration-thickness, and text-underline-offset utilities (#6004)menu reset to preflight (#6213)0 as a valid length value (#6233, #6259)scale-* utilities (c48e629)length data type, by validating each value individually (#6283)decoration-slice and decoration-break in favor box-decoration-slice and box-decoration-break (non-breaking) (#6004)prefix as a function (#5829)flex-basis utilities (#5671)fit-content values for min/max-width/height utilities (#5638)min/max-content values for min/max-height utilities (#5729)cursor-* values by default (#5734)grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-* (#5733)text-decoration-color utilities (#5760)addVariant API (#5809)print variant for targeting printed media (#5885)outline-style, outline-color, outline-width and outline-offset utilities (#5887)fill-* and stroke-* utilities (#5933)awaitWriteFinish setting to avoid occasional stale builds on Windows (#5774)--content option (#5775)_ inside url() when using arbitrary values (#5853)@layer AtRules (#5854)theme(...) for all relevant plugins (#4533, #5871)@apply-ing a utility with multiple definitions works (#5870)@apply the group class (#4666)modern-normalize, inline and consolidate with Preflight (#5358)vertical-align values to config file instead of hard-coding (#5487)overflow-clip to text-clip and overflow-ellipsis to text-ellipsis (#5630)aspect-ratio utilities (#5359)accent-color utilities (#5387)scroll-behavior utilities (#5388)will-change utilities (#5448)text-indent utilities (#5449)column utilities (#5457)border-hidden utility (#5485)align-sub and align-super utilities by default (#5486)break-before, break-inside and break-after utilities (#5530)file variant for ::file-selector-button pseudo element (#4936)touch-action utilities (#5603)inherit to default color palette (#5597)overflow-clip, overflow-x-clip and overflow-y-clip utilities (#5630)[open] variant (#5627)scroll-snap utilities (#5637)border-x and border-y width and color utilities (#5639)content globs (#5625)content globs (#5628)corePlugins order is consistent in AOT mode (#5928)awaitWriteFinish setting to avoid occasional stale builds on Windows (#5758)-i for input file continues to work even though deprecated (#5464)@defaults in JIT, switch back to clean-css in case there’s any meaningful differences in the output (bf248cb)clean-css with cssnano for CDN builds to fix minified builds (75cc3ca)presets: [] in config file (#4903)optimizeUniversalDefaults flag (a9e160c)@applying utilities that contain variants + the important modifier (#4854)clean-css to v5.1.4 to fix empty CSS variables in CDN builds (#5338)@apply (#5249)object-position utilities (#5245)self-baseline utility (I know this is a patch release, no one’s going to die relax) (#5000)JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850))
This provides a very significant performance boost on pages with a huge number of DOM nodes, but there’s a chance it could be a breaking change in very rare edge cases we haven’t thought of. Please open an issue if anything related to shadows, rings, transforms, filters, or backdrop-filters seems to be behaving differently after upgrading.
step-start and step-end in animation utilities (#4795))!* in templates from ruining everything (#4816))@layer rules being mistakenly inserted during incremental rebuilds (#4853))[hidden] works as expected on elements where we override the default display value in Preflight (#4873)backdropOpacity utilities (#4892)postinstall script that was preventing people from installing the library (1eacfb9)npx tailwindcss (359252c)- is used as a custom separator (#4704)~ when stacking peer-* variants (#4757)purge if provided on the CLI (#4772)resolveConfig not being importable in Next.js pages (#4725)transform, filter, and backdrop-filter classes purely to create stacking contexts to minimize the impact of the breaking change (#4700)JIT: Use “tracking” context by default instead of “watching” context for improved reliability with most bundlers (#4514)
Depending on which tooling you use, you may need to explicitly set TAILWIND_MODE=watch until your build runner has been updated to support PostCSS’s dir-dependency message type.
background-origin utilities (#4117)@apply performance in projects that process many CSS sources (#3178)matchUtilities API to make it more suitable for third-party use (#4232)raw syntax in purge config (#4272)empty variant (#3298)modern-normalize to v1.1 (#4287)theme function internally, remove postcss-functions dependency (#4317)screen function to improve nesting plugin compatibility (#4318)@tailwind variants directive to replace @tailwind screens (#4356)dir-dependency messages in TAILWIND_DISABLE_TOUCH mode (#4388)before and after pseudo-element variants and content utilities (#4461)transform and extract APIs to simplify PurgeCSS/JIT customization (#4469)caret-color utilities (#4499)lightBlue to sky, emit console warning when using deprecated name (#4513)--watch mode, and more (#4526, 4558)peer-* variants for styling based on sibling state (#4556)safelist as a top-level option under purge for both JIT and classic engines (#4580)transform class when using classes like scale-*, rotate-*, etc. (#4604)filter and backdrop-filter classes when using classes like contrast-*, backdrop-blur-*, etc. (#4614)blur-none by default with intent to deprecate blur-0 (#4614)calc and var in arbitrary values (#4147)hsl colors to hsla when transforming for opacity support instead of rgba (#3850)backdropBlur variants not being generated (#4188)border utility (#4277)@tailwind directives (2f15411)group variants (#4551)raw PurgeCSS sources when registering template dependencies (#4542)mix-blend-mode and background-blend-mode utilities (#3920)box-decoration-break utilities (#3911)isolation utilities (#3914)inline-table display utility (#3563)list-item display utility (#3929)filter and backdrop-filter utilities (#3923)var(--bg-opacity) value as opacityValue when defining colors as functions@apply in Vue components (#3356)theme() didn’t work with colors defined as functions (#2919)dark variants by default for color opacity utilities (#2975)tailwind.config.cjs file in Node ESM projects (#3181)cursor-help by default (#3199)@apply not working as expected with !important inside an at-rule (#2824)@apply not working as expected with defined classes (#2832)@apply when splitting up files (#3032)ring utility (#2951)overflow-ellipsis and overflow-clip utilities (#1289)transform-gpu to force hardware acceleration on transforms when desired (#1380)inset plugin (#2630)translate, inset, and height plugins (#2630, 5259560)@apply with complex classes, including variants like lg:hover:bg-blue-500 (#2159)2xl breakpoint at 1536px by default (#2609)group-hover for color plugins, boxShadow, and textDecoration by default (28985b6, f6923b1)focus for z-index utilities by default (ae5b3d3)extend in variants configuration (#2651)max-w-prose class by default (#2574)extend (#2679, #2700)focus-within for all plugins that have focus enabled by default (1a21f072, f6923b1)ring utilities for creating outline/focus rings using box shadows (#2747, 879f088, e0788ef)5 and 95 to opacity scale (#2747)target feature and dropped any compatibility with IE 11 (#2571)shadow-outline, shadow-solid, and shadow-xs by default in favor of new ring API (#2747)normalize.css to modern-normalize (#2572)whitespace-no-wrap to whitespace-nowrap (#2664)flex-no-wrap to flex-nowrap (#2676)clearfix utility, recommend flow-root instead (#2766)hover and focus for fontWeight utilities by default (f6923b1)grid-gap fallbacks needed for old versions of Safari (5ec45fa)@apply implementation, slight backwards incompatibilities with previous behavior (#2159)theme retrieve the expected resolved value when theme value is complex (e13f083c4)truncate class to textOverflow core plugin (#2562)scrolling-touch and scrolling-auto utilities (#2573)text-6xl font-size to 3.75rem instead of 4rem (#2619)[hidden] elements within space and divide utilities instead of template elements (#2642)extend objects deeply by default (#2679)preserveHtmlElements option even when using custom PurgeCSS extractor (#2704)tw- to avoid collisions with end-user custom properties (#2771)ring-offset-0 didn’t work due to unitless 0 in calc function (3de0c48)colors.blue.500 is not present in config (e40079a)tw- to avoid collisions with end-user custom properties (#2771)tw- to avoid collisions with end-user custom properties (#2771)postcss and autoprefixer to peerDependencies (729b400)clearfix utility, recommend flow-root instead (#2766)black and white have been added to colors.js (b3ed724)ringColor and ringOffsetColor, previously would crash build (62a47f9)grid-gap fallbacks needed for old versions of Safari (5ec45fa)focus, focus-within, and dark variants (when enabled) for all ring utilities by default (e0788ef)ring-inset utility for rendering rings as inset shadows (879f088)ringWidth utilities always reset ring styles to ensure no accidental variable inheritance through the cascade (879f088)focus-within for outline utilities by default (f6923b1)focus-within for ringWidth utilities by default (f6923b1)group-hover for boxShadow utilities by default (f6923b1)group-hover and focus-within for textDecoration utilities by default (f6923b1)hover and focus for fontWeight utilities by default (f6923b1)boxShadow utilities from overriding ring shadows added by components like in the custom forms plugin (c3dd3b6)none to 0 0 #0000 when used for shadows to ensure compatibility with ring utilities (4eecc27)shadow-outline, shadow-solid, and shadow-xs in favor of new ring API (#2747)shadow-solid utility, a 2px solid shadow that uses the current text color (369cfae)focus-within where useful by default (1a21f072)shadow-outline to use the new blue (b078238)11 to spacing scale (7f05204)coolGray as the default gray (700866c)preserveHtmlElements option even when using custom PurgeCSS extractor (#2704)inherit on body to behave more like v1.x (#2729)extend (#2700)space and divide utilities (#2644)space and divide utilities ignore elements with [hidden] now instead of only ignoring template elements (#2642)body, not just html (#2643)whitespace-no-wrap to whitespace-nowrap (#2664)The presets feature had unexpected behavior where a preset config without its own presets key would not extend the default config. (#2662)
If you were depending on this unexpected behavior, just add presets: [] to your own preset to exclude the default configuration.
overflow-ellipsis and overflow-clip utilities (#1289)transform-gpu to force hardware acceleration on transforms when beneficial (#1380)inset plugin (#2630)@apply with complex classes (#2159)2xl breakpoint (#2609)group-hover for color utilities by default (28985b6)focus for z-index utilities by default (ae5b3d3)@apply implementation, slight backwards incompatibilities with previous behavior (#2159)truncate class to textOverflow core plugin (#2562)target feature and dropped any compatibility with IE 11 (#2571)normalize.css to modern-normalize (#2572)scrolling-touch and scrolling-auto utilities (#2573)space and divide utilities (#1883)theme retrieve the expected resolved value when theme value is complex (e13f083c4)theme with default line-heights did not resolve correctlywithOptions API would not trigger rebuilds in watch processestailwindcss init --full scaffolded a corrupt config file (https://github.com/tailwindlabs/tailwindcss/issues/2556)word-wrap and overflow-wrap together, not one or the other since word-wrap is IE-onlycorePlugins in resolveConfig to avoid bundling browser-incompatible code (#2548)presets config option (#2474)tailwind.config.js files with available future flags commented out (#2379)col-span-full and row-span-full (#2471)outline configurable, outline-none more accessible by default, and add outline-black and outline-white (#2460)rotate and skew values (#2528)xl, 2xl, and 3xl border radius values (#2529)grid-auto-columns and grid-auto-rows (#2531)defaultLineHeights and standardFontWeights from experimental to futureword-wrap instead of overflow-wrap in ie11 target mode (#2391)2xl breakpoint (#2468){u}-max-content and {u}-min-content utilities to {u}-max and {u}-min in experimental extended spacing scale (#2532)tailwindcss.plugin work in ESM environments for reasonsdark experiment from causing third-party dark variants to inherit stacking behavior (#2382)extendedSpacingScale experiment (#2358)!important was stripped from declarations within rules that used @apply with applyComplexClasses (#2376)resolveConfig code path (#2368)class=\"block\") weren’t extracted properly for purging (#2364)resolveConfig didn’t take into account configs added by feature flags (#2347)@apply when using the applyComplexClasses experiment (#2271)font-hairline and font-thin to font-thin and font-extralight behind standardFontWeights flag (experimental until v1.9.0) (#2333)font-variant-numeric utilities would break in combination with most CSS minifier configurations (f3660ce)conservative purge mode being deprecated once per process (58781b5)plugins array in your config (#2322)preserveHtmlElements option for purge (#2283)layers mode for purge (#2288)font-variant-numeric utilities (#2305)place-items, place-content, place-self, justify-items, and justify-self utilities (#2306)@layer at-rules are now grouped with the corresponding @tailwind at-rule (#2312)conservative purge mode, deprecated in favor of layers@apply implementation broke when applying a variant class with the important option globally enabledpostcss.config.js file@apply insensitive to whitespace in the new applyComplexClasses experimentapplyComplexClasses experiment didn’t behave as expected with rules with multiple selectors, like .foo, .bar { color: red }gradientColorStops plugin was enabledcontents display utility@apply with variants and other complex classes (experimental)@keyframes respecting the important option would break animations in Chromeprefers-reduced-motion variantsoverscroll-behaviour utilities@apply with unprefixed class names if you had configured a prefixvariants supportcontainer variantsfocus-visible variantchecked variantNo release notes
divideColor plugin was using the wrong ‘’ in IE11 target modetarget: ['browserslist', {...}] didpurge: { enabled: false } was ignored, add purge: false shorthandfs-extra dependency to ^8.0.0 to preserve Node 8 compatibility until Tailwind 2.0space-x-0 didn’t work for example)divide-{x/y}-0 utilities didn’t work due to missing unit in calc callspace, divideWidth, and divideColor utilitiesspace-x utilities were not being applied correctly due to referencing --space-y-reverse instead of --space-x-reversespace and divide layout utilitiestransition-delay utilitiesgroup-focus variantcontainer classcurrent to the default color paletteinline-grid utilityflow-root display utilityclear-none utilitymax-w-{screen} utilitiesmax-w-none utilityrounded-md utilityshadow-sm utilityshadow-xs utilitystroke-width utilitiesplugin and plugin.withOptions APIsresolve which is required for making config dependencies watchablemax-w-{screen} utilitiesmax-w-none utilityrounded-md utilityshadow-sm utilityplugin and plugin.withOptions APIsNo release notes
.group class. I’m sorry 😞.group class was not receiving the user’s configured prefix when using the prefix optionnode_modules files for changesv1.2.0-canary.0theme config didn’t receive the second utils argumentjustify-evenly utilityauto would fail to make it through the default negative margin configborder-double utility!important directly in Tailwind utility plugins@tailwind preflight instead of @tailwind base, this is the source of many support requests@screen rules weren’t bubbled properly when nested in pluginsNo release notes
9999 and -9999 for order-last and order-first utilities respectivelybg-repeat-round and bg-repeat-space utilitiesselect-all and select-auto utilitiesresponsive variants for the new order utilities by default, should have been there all along-top-6, -right-4) and z-index (-z-10) utilities, using the same negative key syntax supported by the margin pluginorder utilitiescursor-text class by defaultnegativeMargin plugin, now the regular margin plugin supports generating negative classes (like -mx-6) by using negative keys in the config, like -6corePlugins: false@apply directivescontainer key to the scaffolded config file when generated with --fullSFMono-Regular from the beginning of the default monospace font stack, it has no italic support and Menlo looks better anywaysextendtheme.extendbolder for strong tags by default instead of fontWeight.boldtheme section of the config file are now passed a theme function instead of an object@screen didn’t work at all 🙃maxWidth scalelist-style-type and list-style-positionbreak-all utilityobject-position utilities are now customizable under theme.objectPositioncursor utilities are now customizable under theme.cursorsflex-grow/shrink utilities are now customizable under theme.flexGrow/flexShrink.character had the responsive prefix added in the wrong place--no-autoprefixer option to CLI build commandshadowLookup from experiment to official featurewebpack --watch@tailwind utilities generated no output@apply-ing classes that aren’t defined but would be generated (experimental).shadow-outline utility 🤦♂️.outline-none utility for suppressing focus styles.shadow-outline utility as an alternative to default browser focus stylesoutline: none !important styles from focusable but keyboard-inaccessible elementsgroup-hover variantspreflight.roman class to .not-italic due to the fact that it breaks compatibility with cssnext: postcss/postcss-selector-not#10. We’ll stick with .roman for now with a plan to switch to .not-italic in another breaking version should that issue get resolved in postcss-selector-not..sticky position utility.cursor-wait and .cursor-move utilities.bg-auto background size utility.container component.container component is now a built-in plugin.overflow-x/y-scroll now set overflow: scroll instead of overflow: auto.roman renamed to .not-italicglobal.Object to avoid issues with polyfills when importing the Tailwind config into other JSimg tags without specifying a border stylefont shorthand@apply’d classes can now be made !important explicitly@apply now strips !important from any mixed in classes@variants at-rule.pin no longer sets width and height to 100%fill no longer defaults to currentColor!importantauto is no longer a hard-coded margin valuedefaultConfig function is now a separate module@apply is now very strict about what classes can be appliedoptions key to your configmy-auto, mt-auto, and mb-auto margin utilitiessans-serif to end of default sans font stacktailwind init [filename], automatically append .js to filename if not presentconfig(...) function, ie. config('colors.blue', #0000ff).scrolling-touch and .scrolling-auto utilities for controlling inertial scroll behavior on WebKit touch devicestailwind buildtailwind build CLI command not writing output files