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 8 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
Fix use of :where(.btn) when matching !btn
Fix installation failing with yarn and pnpm by dropping oxide-api-shim
oxide-api-shim (add1636)One column per quarter.
Add standalone CLI build for 64-bit Windows on ARM (node16-win-arm64)
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)Add blocklist option to prevent generating unwanted CSS
Fixed use of raw content in the CLI
Escape special characters in resolved content base paths
font-feature-settings are included in Preflight (#9707)@apply in selectors with combinators and pseudos (#9722)Fix missing PostCSS dependencies in the CLI
We just released Tailwind CSS v3.2! Read the announcement post for more details about the most exciting new features.
We just released Tailwind CSS v3.2! Read the announcement post for more details about the most exciting new features.
@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)Don’t prefix classes within reused arbitrary variants
Don't rewrite source maps for @layer rules
Handle theme keys with slashes when using theme() in CSS
Support configuring a default font-weight for each font size utility
font-weight for each font size utility (#8763)tailwindcss and autoprefixer in postcss.config.js in standalone CLI (#8769)Provide default to when using theme()
Fix extraction of multi-word utilities with arbitrary values and quotes
corePluginList type definition (#8587)addVariant (#8608)theme() function when using quotes (#8625)::marker (#8622)Ensure \ is a valid arbitrary variant token
Fix candidate extractor regression
We just released Tailwind CSS v3.1 — the first new feature release since v3.0 came out last year!
We just released Tailwind CSS v3.1 — the first new feature release since v3.0 came out last year!
Read the announcement post for all the details, and watch the YouTube video for a tour of some of the highlights.
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 (#8125)@apply rules (#8213)[hidden] style in preflight (#8248)important selector to the front when @apply-ing selector-modifying variants in custom utilities (#8313)matchVariants 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)Prevent nesting plugin from breaking other plugins
@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)Remove opacity variables from :visited pseudo class
Temporarily move postcss to dependencies
Move prettier plugin to dev dependencies
Expose context.sortClassList(classes)
context.sortClassList(classes) (#7412)Fix preflight border color fallback
Fix @apply order regression (in addComponents, addUtilities, ...)
Remove false positive warning in CLI when using the --content option
--content option (#7220)Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting)
Temporarily remove optional chaining in nesting plugin
Show warnings for invalid content config
Fix consecutive builds with at apply producing different CSS
Allow use of falsy values in theme config
linuxstatic build target (#6914)@apply works consistently with or without @layer (#6938)experimental.optimizeUniversalDefaults to only work with @tailwind base (#6926)Preserve casing of CSS variables added by plugins
Fix @apply in files without @tailwind directives (#6580, #6875)
Improve DEBUG flag (#6797, #6804)
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)Reduce specificity of abbr rule in preflight
Don't mutate custom color palette when overriding per-plugin colors
@apply (#6588)user layers (#6589)@apply of a rule inside an AtRule works (#6594)Support square bracket notation in paths
Revert: add li to list-style reset
Insert always-on defaults layer in correct spot
Warn about invalid globs in content
content (#6449)li to list-style reset (00f60e6)Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being @apply-able in CSS modules/Svelte components/Vue
@apply-able in CSS modules/Svelte components/Vue components (#6461)Ensure complex variants with multiple classes work
Add grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-*
Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.
Read the announcement post for all the details.
aspect-ratio utilities (#5359)column utilities (#5457)break-before, break-inside and break-after utilities (#5530)text-indent utilities (#5449)text-decoration-{color/style/thickness/offset} utilities (#5760, #6004)outline-style, outline-color, outline-width and outline-offset utilities (#5887)align-sub and align-super vertical-align utilities (#5486)accent-color utilities (#5387)scroll-snap utilities (#5637)scroll-behavior utilities (#5388)touch-action utilities (#5603, #6115)flex-basis utilities (#5671)grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-* (#5733)border-x and border-y width and color utilities (#5639)border-hidden utility (#5485)overflow-clip, overflow-x-clip and overflow-y-clip utilities (#5630)inherit to default color palette (#5597)fill-* and stroke-* utilities (#5933)fit-content values for min/max-width/height utilities (#5638)min/max-content values for min/max-height utilities (#5729)will-change utilities (#5448)cursor-* values by default (#5734)print variant for targeting printed media (#5885)placeholder variant (#6106)file variant for ::file-selector-button pseudo element (#4936)[open] variant (#5627)portrait and landscape variants (#6046)menu reset to preflight (#6213)addVariant API (#5809)overflow-clip to text-clip and overflow-ellipsis to text-ellipsis (#5630)decoration-slice and decoration-break in favor box-decoration-slice and box-decoration-break (#6004)vertical-align values to config file instead of hard-coding (#5487)@apply the group class (#4666)modern-normalize, inline and consolidate with Preflight (#5358)prefix as a function (#5829)Thanks to everyone who contributed to this release: @95jonpet, @AviAvinav, @DavydeVries, @DoctorDerek, @MatteoGauthier, @MichaelAllenWarner, @RobinMalfait, @TCatinaud, @adamwathan, @bradlc, @bytedance, @codytooker, @dance2die, @dcastil, @ericbf, @geshii, @hardfist, @htunnicliff, @iksaku, @innocenzi, @kwaa, @lukewarlow, @nifte, @reinink, @sachinraja, @seanpdoyle, @xiBread, @xzfd1010
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)Add grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-*
To upgrade, install tailwindcss@next:
npm install -D tailwindcss@next
If you're using @tailwindcss/typography or @tailwindcss/forms, you'll want to update those packages as well:
npm install -D @tailwindcss/typography@next
npm install -D @tailwindcss/forms@next
Remember this is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release in a few weeks.
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)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)Thanks to everyone who contributed to this release: @adamwathan, @bradlc, @dance2die, @dcastil, @DoctorDerek, @hardfist, @lukewarlow, @MatteoGauthier, @MichaelAllenWarner, @nifte, @reinink, @RobinMalfait, @sachinraja, @xzfd1010 ❤️
We've tried really hard to keep the breaking changes to a minimum, and this should be a really smooth upgrade — especially if you were already using t…
The first alpha release of Tailwind CSS v3.0 is here! If you don't even care what's changed and just want to start using it right now, install it via npm:
npm install -D tailwindcss@next
If you're using @tailwindcss/typography or @tailwindcss/forms, you'll want to update those packages as well:
npm install -D @tailwindcss/typography@next
npm install -D @tailwindcss/forms@next
We've also got a brand new CDN build you can play with if you want, too.
Remember this is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release later this year.
aspect-ratio utilities, using the new native aspect-ratio property (#5359)accent-color utilities, for setting the color of a form input's accent (#5387)scroll-snap utilities, for CSS-only scroll snapping (#5637)scroll-behavior utilities, for browser-native smooth scrolling (#5388)text-indent utilities, for indenting the first line in a paragraph (#5449)column and break-before/inside/after utilities, for wrapping multi-column content (#5457, #5530)touch-action utilities, for controlling touchscreen interactions (#5603)will-change utilities, for optimizing transition performance (#5448)border-x and border-y utilities, for styling left/right and top/bottom borders a the same time (#5639)file: variant, for styling the native file upload button (#4936)open: variant, for styling open <details> and <dialog> elements (#5627)We've tried really hard to keep the breaking changes to a minimum, and this should be a really smooth upgrade — especially if you were already using the JIT engine.
Start by reading the Just-in-Time mode changes in the documentation, and then come back here for a couple more steps.
purge has changed to contentThe JIT engine doesn't actually use PurgeCSS under-the-hood, so purge doesn't feel like the right name for these configuration options anymore.
Now this configuration should look like this:
// tailwind.config.js
module.exports = {
content: ['./src/**/*.html' /* ... */],
}
For more complex configurations, it should look something like this:
// tailwind.config.js
module.exports = {
content: {
files: ['./src/**/*.html' /* ... */],
transform: {
md: (content) => {
return remark().process(content)
},
},
extract: {
md: (content) => {
return content.match(/[^<>"'`\s]*/)
},
},
},
safelist: [
'font-bold',
'text-center',
{ pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
],
// ...
}
We've tried really hard to make Tailwind smart enough to understand the old configuration as well, so with any luck your existing configuration should still work, but you'll want to update to the new format to silence the annoying console warnings we blast you with.
As part of enabling the extended color palette by default, a few color names needed to change due to collisions.
See the pull request for all of the details you need to upgrade. It should only be a couple of lines of code in your tailwind.config.js file.
overflow-clip has changed to text-clipThose damn browser developers added a real overflow: clip property, so using overflow-clip for text-overflow: clip is a really bad idea now.
We've renamed it to text-clip, and now overflow-clip adds overflow: clip like you'd expect. We've also renamed overflow-ellipsis to text-ellipsis, but overflow-ellipsis still secretly works.
- <div class="overflow-clip">
+ <div class="text-clip">
If you were using the @tailwindcss/postcss7-compat package because you are stuck on PostCSS 7, you'll need to upgrade to PostCSS 8 before you can upgrade to Tailwind CSS v3.0.0-alpha.1.
I think this is mostly create-react-app users, and thankfully they are close to releasing a new version that uses webpack 5 and supports PostCSS 8 by default.
<a name="just-in-time-cdn"></a>
Something that has always sucked about our CDN builds is that we always had to disable tons of awesome features to keep the file size down to something the browser was willing to parse.
For Tailwind CSS v3.0, we're doing it differently. Inspired by some awesome work Marcel Pociot did on tailwindcss-jit-cdn, we've built a JS library that compiles Tailwind in the browser, and uses MutationObserver to keep track of all of the classes you're using.
It lets you use every feature Tailwind CSS has to offer, and does it in 93kB — which ain't bad for something originally designed to run in node with no file size considerations at all.
The Just-in-Time CDN is intended for development purposes only, and should not be used in production.
<details><summary> Why shouldn't it be used in production?</summary>
The biggest reason is because it uses MutationObserver to add the styles, it can't detect styles for dynamically created elements fast enough to avoid a flash of unstyled content (FOUC).
For example, say you have some JavaScript that opens a modal, and the modal is supposed to transition in when it opens. When the modal opens, the HTML for it is inserted into the DOM right away, but the styles might not exist for it yet because you haven't used those same classes elsewhere in the file. The observer will fire, and Tailwind will generate the styles, but the modal is already open, so you're going to see an unstyled flash the first time it opens.
We recommend pulling in the JIT CDN as a blocking (so not deferred) script to avoid the FOUC for the very initial render, but that of course means it adds 100ms (or whatever) before the page is even rendered. Not a big deal really but using a static CSS file is way faster.
It's also quite large (almost 100kB compressed) whereas compiling your CSS ahead of time usually leads to something closer to 10kb compressed, and with no run time overhead.
TLDR; It's probably fine for simple static pages but it's really much better to build the static CSS file. </details>
To try it out, throw this <script> tag in your <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
+ <script src="https://cdn-tailwindcss.vercel.app/"></script>
</head>
<body>
<!-- -->
</body>
</html>
We'll give it a more permanent URL in the future but this is good enough for the alpha.
First-party plugins can be automatically loaded using the plugins query parameter:
<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
The plugins parameter accepts a comma-separated list of plugins, and you can optionally specifiy a version number or range for each plugin, for example ?plugins=forms@0.3.4,typography@^0.5
To customize your Tailwind CSS configuration, override tailwind.config:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://cdn-tailwindcss.vercel.app/"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
tomato: 'tomato',
},
},
},
}
</script>
</head>
<body>
<!-- -->
</body>
</html>
Use <style type="text/tailwindcss"> elements to add any custom CSS that that you'd like to process with Tailwind:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://cdn-tailwindcss.vercel.app/"></script>
<style type="text/tailwindcss">
body {
@apply bg-pink-500;
}
</style>
</head>
<body>
<!-- -->
</body>
</html>
So there you have it! Again, this is an alpha release so there are probably going to be some issues, but play with it and report any problems you find so we can get it all cleaned up for a proper release in a month or two.
Thanks to community members @bytedance, @htunnicliff, @DoctorDerek, @lukewarlow, @codytooker, @nifte, @ericbf, @kwaa, @MatteoGauthier, @geshii, @sachinraja, @TCatinaud, @iksaku, @seanpdoyle, @95jonpet, @innocenzi, @DavydeVries, and @hardfist for your contributions to this release — lots of good ideas and improvements made it in thanks to you ❤️
@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)Ensure corePlugins order is consistent in AOT mode
corePlugins order is consistent in AOT mode (#5928)Bump versions for security vulnerabilities
Configure chokidar's awaitWriteFinish setting to avoid occasional stale builds on Windows
awaitWriteFinish setting to avoid occasional stale builds on Windows (#5758)JIT: Properly handle animations that use CSS custom properties
Ensure using CLI without -i for input file continues to work even though deprecated
-i for input file continues to work even though deprecated (#5464)Only use @defaults in JIT, switch back to clean-css in case there's any meaningful differences in the output
@defaults in JIT, switch back to clean-css in case there's any meaningful differences in the output (bf248cb)### Fixed - Fix broken CDN build
clean-css with cssnano for CDN builds to fix minified builds (75cc3ca)Ensure that divide utilities inject a default border color
Rebundle to fix missing CLI peer dependencies
Fix build error when using presets: [] in config file
JIT: Fix @applying utilities that contain variants + the important modifier
Improve accessibility of default link focus styles in Firefox
@apply (#5249)object-position utilities (#5245)Temporarily revert runtime performance optimizations introduced in v2.2.5, use universal selector again
Fix issue where base styles not generated for translate transforms in JIT
…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 relat…
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)Remove postinstall script that was preventing people from installing the library
postinstall script that was preventing people from installing the library (1eacfb9)Your coding agent can read these notes before it upgrades. Set up the MCP server →