Update dependency tailwindcss to v4 #12
Reference in New Issue
Block a user
No description provided.
Delete Branch "renovate/tailwindcss-monorepo"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This PR contains the following updates:
^3.0.7->^4.0.0Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.1.11Compare Source
Fixed
emit(…)(#18330)--watch=alwaysin the CLI's usage (#18337)@tailwindcss/vite(#18384)v4.1.10Compare Source
Fixed
w-[calc(100%-var(--offset))]) (#18289)v4.1.9Compare Source
Fixed
/[0.16]→/16) (#18184)mb-[-32rem]→-mb-128) (#18212)blurinwire:model.blur(#18216)v4.1.8Compare Source
Added
@applyfails (#18059)Fixed
<style>blocks (#18057, 18068)tailwindcssin pnpm monorepos (#18065)order-nonetoorder-0(#18126)class:attributes when extracting classes (#18093)-mt-[0px]tomt-[0px]instead of the other way around (#18154)\nat the end of the file (#18155).pnpm-storefolders by default (can be overridden by@source …rules) (#18163)toJSON()(#18083)v4.1.7Compare Source
Added
Fixed
_before numbers during candidate extraction (#17961)@themeand@utilitytogether (#17675)::beforeand::afterpseudo selectors create valid CSS rules in production builds (#17979)-rotate-*utilities properly negate arbitrary values (#18014):merge(…)selectors in legacy JS plugins (#18020).are properly extracted from Clojure files (#18038)@import … source(…)(#17963)class(#18025)v4.1.6Compare Source
Added
h-[1lh]toh-lh) (#17831, #17854)@sourcedirectives, discovered files and scanned files when usingDEBUG=*(#17906, #17952)Fixed
scalevalues generate negative values (#17831)@reference(#17836)_withbg-red-500/(--my_opacity)(#17889).logfiles for classes by default (#17906)@applyrules (#17925)optionalDependenciesare skipped (#17929)v4.1.5Compare Source
Added
@tailwindcss/upgradeto upgrade between versions of v4.* (#17717)h-lh/min-h-lh/max-h-lhutilities (#17790)display,visibility,content-visibility,overlay, andpointer-eventswhen usingtransitionto simplify@starting-styleusage (#17812)Fixed
.geojsonor.dbfiles for classes by default (#17700, #17711)_with.in theme suggestions for@utilityif surrounded by digits (#17733)color-mix(…)when opacity is100%(#17815)-to variants starting with@(#17814)Changed
.hg,.svn,.venv,venv,.yarn,.next,.turbo,.parcel-cache,__pycache__, and.svelte-kitfolders by default (can be overridden by@source …rules) (#17892)@sourcerules that point inside.hg,.svn,.venv,venv,.yarn,.next,.turbo,.parcel-cache,__pycache__, and.svelte-kitfolders no longer consider your.gitignorerules (#17892)v4.1.4Compare Source
Added
@tailwindcss/oxide-wasm32-wasitarget for running Tailwind in browser environments like StackBlitz (#17558)Fixed
color-mix(…)polyfills do not cause used CSS variables to be removed (#17555)color-mix(…)polyfills create fallbacks for theme variables that reference other theme variables (#17562){10..0..5}and{0..10..-5}(#17591)skew-*utilities (#17627)shadow-inherit,inset-shadow-inherit,drop-shadow-inherit, andtext-shadow-inheritinherit the shadow color (#17647)fontSizeJS theme keys (#17630)fontSizearray tuple syntax to CSS theme variables (#17630)v4.1.3Compare Source
Fixed
--value(…)(#17464)%wsyntax in Slim templates (#17557)v4.1.2Compare Source
Fixed
@layer baseto polyfill@property(#17506)drop-shadow-*utilities that are defined with multiple shadows (#17515)@tailwind utilitiesare processed (#17514)color-mix(…)polyfill creates fallbacks even when using colors that cannot be statically analyzed (#17513)@tailwindcss/viteand@tailwindcss/postscss(especially on Windows) (#17511)v4.1.1Compare Source
Fixed
emit(…)(#18330)--watch=alwaysin the CLI's usage (#18337)@tailwindcss/vite(#18384)v4.1.0Compare Source
Added
details-contentvariant (#15319)inverted-colorsvariant (#11693)noscriptvariant (#11929, #17431)items-baseline-lastandself-baseline-lastutilities (#13888, #17476)pointer-none,pointer-coarse, andpointer-finevariants (#16946)any-pointer-none,any-pointer-coarse, andany-pointer-finevariants (#16941)user-validanduser-invalidvariants (#12370)wrap-anywhere,wrap-break-word, andwrap-normalutilities (#12128)@source inline(…)and@source not inline(…)(#17147)@source not "…"(#17255)text-shadow-*utilities (#17389)mask-*utilities (#17134)bg-{position,size}-*utilities for arbitrary values (#17432)shadow-*/<alpha>,inset-shadow-*/<alpha>,drop-shadow-*/<alpha>, andtext-shadow-*/<alpha>utilities to control shadow opacity (#17398, #17434)drop-shadow-<color>utilities (#17434)Fixed
@sourcedirectives (#17391)@tailwindcss/cli(#17255)contentrules in legacy JavaScript configuration (#17255)@("@​")md:…as@md:…in Razor files (#17427)--theme(…)function still resolves to the CSS variables when using legacy JS plugins (#17458)Changed
node_modulesby default (can be overridden by@source …rules) (#17255)@sourcerules that include file extensions or point insidenode_modules/folders no longer consider your.gitignorerules (#17255)bg-{left,right}-{top,bottom}in favor ofbg-{top,bottom}-{left,right}utilities (#17378)object-{left,right}-{top,bottom}in favor ofobject-{top,bottom}-{left,right}utilities (#17437)v4.0.17Compare Source
Fixed
v4.0.16Compare Source
Added
--value('…')and--modifier('…')(#17304)Fixed
(in Pug (#17320)@keyframesfor theme animations are emitted if they are referenced following a comma (#17352)Slimtemplates embedded in Ruby files (#17336)--spacing(--value(integer, number))is used (#17308)::-webkit-details-markerpseudo tomarkervariant (#17362)v4.0.15Compare Source
Fixed
-bg-conic-*utilities (#17174)border-[12px_4px]being interpreted as aborder-colorinstead of aborder-width(#17248)<template lang="…">in Vue files (#17252)--value(…)or--modifier(…)calls don't delete subsequent declarations (#17273)(in Slim (#17278)PluginUtilsfromtailwindcss/pluginfor compatibility with v3 (#17299)line-height: initialfrom Preflight (#15212)Changed
--theme(…)function now returns CSS variables from your theme variables unless used inside positions where CSS variables are invalid (e.g. inside@mediaqueries) (#17036)v4.0.14Compare Source
Fixed
${(#17142).character (#17153)v4.0.13Compare Source
Fixed
.nodeand.wasmfiles are not scanned for utilities (#17123)v4.0.12Compare Source
Fixed
url(…)rebasing in transitively imported CSS files (#16965)url(…)s in imported CSS files (#16965)}and{are properly extracted (#17001)razor/cshtmlpre-processing (#17027)v4.0.11Compare Source
Fixed
--are extracted correctly (#16972)[are extracted in Slim templating language (#16985)v4.0.10Compare Source
Added
col-<number>androw-<number>utilities forgrid-columnandgrid-row(#15183)Fixed
not-*does not remove:is(…)from variants (#16825)@keyframesare correctly emitted when using a prefix (#16850)@utilitydeclarations when@applyis used in nested rules (#16940)outline-hiddenbehaves likeoutline-noneoutside of forced colors mode (#16943)!importanton CSS variables again (#16873).svgfile with#or?in the filename (#16957)Changed
max-w-autoandmax-h-autoutilities as they generate invalid CSS (#16917)v4.0.9Compare Source
Fixed
.css(#16780)@reference "…"would sometimes omit keyframe animations (#16774)z-*!utilities are properly marked as!important(#16795)Changed
@reference "…"instead of duplicate CSS variable declarations (#16774)v4.0.8Compare Source
Added
@importwiththeme(…)options for stylesheets that contain more than just@themerules (#16514)Fixed
!importantto CSS variable declarations when using the important modifier (#16668).gitignorefile when using automatic source detection(#16631)translate-z-pxutilities once in compiled CSS (#16718)Changed
v4.0.7Compare Source
Fixed
tailwindcss/lib/util/flattenColorPalette.jsfor backward compatibility (#16411)_in suggested theme keys (#16433)--default-outline-widthcan be used to change theoutline-widthvalue of theoutlineutility (#16469)tailwindcss/pluginfor backward compatibility (#16505)@tailwindcss/oxideWindows builds (#16602)tailwindcssin@tailwindcss/*packages (#16623)darkModeJS config setting with block syntax converts to use@slot(#16507)tailwindcssand@tailwindcss/postcssare installed when upgrading (#16620)v4.0.6Compare Source
Fixed
blurtoblur-smwhen used with Next.js<Image placeholder="blur" />(#16405)v4.0.5Compare Source
Added
@theme staticoption for always including theme variables in compiled CSS (#16211)Fixed
console.logfrom@tailwindcss/vite(#16307)Changed
v4.0.4Compare Source
Fixed
null(#16210)containersJS theme key is added to the--container-*namespace (#16169)@keyframesare generated even if an--animation-*variable spans multiple lines (#16237)?commonjs-proxyflag (#16238)order-firstandorder-lastfor Firefox (#16266)NODE_PATHis respected when resolving JavaScript and CSS files (#16274)@variantinside a referenced stylesheet could cause a stack overflow (#16300)v4.0.3Compare Source
Fixed
@import url();(#16144)v4.0.2Compare Source
Fixed
grid-cols-*andgrid-rows-*utilities (#16020)@referenceor@variant(#16057)<style>blocks in HTML files (#16069)@keyframesin@theme reference(#16120)@variantwhen at the top-level of a stylesheet (#16129)v4.0.1Compare Source
Fixed
v4.0.0Compare Source
Added
@property, andcolor-mix().color-scheme,field-sizing, complex shadows,inert, and more.Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.
For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.
For a deep-dive into everything that's new, check out the announcement post.
v3.4.17Compare Source
Fixed
v3.4.16Compare Source
Fixed
PluginsConfigallowundefinedvalues (#14668)v3.4.15Compare Source
boxShadowtheme configuration allows arrays (#14856)selection:*variant works in Chrome 131 (#15003)v3.4.14Compare Source
Fixed
display: noneon elements that usehidden="until-found"(#14625)v3.4.13Compare Source
Fixed
v3.4.12Compare Source
Fixed
@applywith utilities that use@defaultsworks with rules defined in the base layer when usingoptimizeUniversalDefaults(#14427)v3.4.11Compare Source
Fixed
anchor-size(…)in arbitrary values (#14393)v3.4.10Compare Source
Fixed
v3.4.9Compare Source
Fixed
vendorfoldersv3.4.8Compare Source
Fixed
v3.4.7Compare Source
Fixed
data-*andaria-*modifiers are always quoted in the generated CSS (#14037)v3.4.6Compare Source
Fixed
Changed
:is()wrapping rules when using an important selector (#13900)v3.4.5Compare Source
Fixed
var()injection for anchor properties (#13826)blur(0px)forbackdrop-blur-noneandblur-noneutilities (#13830).mtsand.ctsconfig file detection (#13940)px-1unnecessarily when using utilities likepx-1.5(#13959)-webkit-backdrop-filterforbackdrop-*utilities (#13997)v3.4.4Compare Source
Fixed
<alpha-value>placeholders in a single color definition (#13740)has-*,group-has-*, andpeer-has-*variants (#13770){col,row}-{start,end}utilities (#13781)v3.4.3Compare Source
Fixed
v3.4.2Compare Source
Fixed
0,0,1for button and input Preflight rules (#12735)(,),[or]in the file path (#12715):hasrules when usingexperimental.optimizeUniversalDefaults(#12736)mix-blend-plus-darkerutility (#12923)import.meta.urlin config files (#13322)xx-largeand remove doublex-largeabsolute size (#13324)@applya class that uses nesting (#13325)importantconfiguration (#13353)@applyworks correctly with pseudo elements (#13379)v3.4.1Compare Source
Fixed
v3.4.0Compare Source
Added
svh,lvh, anddvhvalues to defaultheight/min-height/max-heighttheme (#11317)has-*variants for:has(...)pseudo-class (#11318)text-wraputilities includingtext-balanceandtext-pretty(#11320, #12031)opacityscale to include all steps of 5 (#11832)htmlstyles to include shadow DOM:hostpseudo-class (#11200)grid-rows-*utilities from 1–6 to 1–12 (#12180)size-*utilities (#12287)min-w-*,min-h-*, andmax-w-*utilities (#12300)forced-color-adjustutilities (#11931)forced-colorsvariant (#11694, #12582)appearance-autoutility (#12404)floatandclearutilities (#12480)*variant for targeting direct children (#12551)Changed
sansfont-family stack (#11748)rtl,ltr,forced-colors, anddarkvariants (#12584)v3.3.7Compare Source
Fixed
v3.3.6Compare Source
Fixed
@configin CSS when watching via the CLI (#12327)resolveConfig(#12272)font-feature-settingsformonoare included in Preflight (#12342)@layerrule (#12508)v3.3.5Compare Source
Fixed
-incalc()expression (#12283)v3.3.4Compare Source
Fixed
calc()-like functions (#11686)calc()normalisation in nestedtheme()calls (#11705)contentoptional for presets in TypeScript types (#11730)too many open fileserror (#12079):not(…)when nested in an at-rule (#12105)Node16module resolution (#12097)@apply(#12112)tailwindcss/nesting(#12269)jiti,fast-glob, andbrowserlistdependencies (#11550)varinjection for properties that accept a<dashed-ident>(#12236)v3.3.3Compare Source
Fixed
theme()insidecalc()when there are no spaces around operators (#11157)repeating-conic-gradientis detected as an image (#11180):isby default (#11345)groupandpeervariants (#11454)Added
aria-busyutility (#10966)Changed
<dialog>elements in preflight (#11069)v3.3.2Compare Source
Fixed
toposition of gradient when using implicit transparent colors (#11002)@tailwindcss/oxidedoesn't leak in the stable engine (#10988)theme(spacing[5])calls with bracket notation in arbitrary properties work (#11039)Changed
v3.3.1Compare Source
Fixed
@apply, andimportantselectors when using:is()or:has()with pseudo-elements (#10903)safelistconfig types (#10901)@tailwindcss/line-clampwarning (#10915, #10919)v3.3.0Compare Source
Added
line-heightmodifier support tofont-sizeutilities (#9875)var(...)(#9880, #9962)hyphensutilities (#10071)from-{position},via-{position}andto-{position}utilities (#10886)list-style-imageutilities (#10817)caption-sideutilities (#10470)line-clamputilities from@tailwindcss/line-clampto core (#10768, #10876, #10862)delay-0andduration-0utilities (#10294)justify-normalandjustify-stretchutilities (#10560)content-normalandcontent-stretchutilities (#10645)whitespace-break-spacesutility (#10729)font-variation-settingsfor afont-family(#10034, #10515)Fixed
null, is an emptySet(#10877)Changed
rtlandltrvariants as stable and remove warnings (#10764)insetinstead oftop,right,bottom, andleftproperties (#10765)darkandrtl/ltrvariants insensitive to DOM order (#10766):isto make important selector option insensitive to DOM order (#10835)v3.2.7Compare Source
Fixed
:where(.btn)when matching!btn(#10601)outline-colorintransitionandtransition-colorsby default (#10604)v3.2.6Compare Source
Fixed
oxide-api-shim(add1636)v3.2.5Compare Source
Added
node16-win-arm64) (#10001)Fixed
variantOrder(#9829)foo-[abc]/[def]not being handled correctly (#9866)resolveConfig, unwrapResolvableTo(#9972)datakey to theme types (#10023)string[]in thetheme.dropShadowtypes (#10072)rootor@layernodes (#10229)blocklistmember in theConfigtype (#10239)layerinsidevariantslayer (#10505)--watch=alwaysoption to prevent exit when stdin closes (#9966)Changed
themekeys in default config (#9953)outline-colorintransitionandtransition-colorsutilities (#10385)v3.2.4Compare Source
Added
blocklistoption to prevent generating unwanted CSS (#9812)Fixed
v3.2.3Compare Source
Fixed
rawcontent in the CLI (#9773)@apply(#9765)!) (#9791)v3.2.2Compare Source
Fixed
font-feature-settingsare included in Preflight (#9707)@applyin selectors with combinators and pseudos (#9722)v3.2.1Compare Source
Fixed
supportsin types (#9616)micromatchis a proper CLI dependency (#9620)modifiersobject formatchVariant(ba6551d)v3.2.0Compare Source
Added
@configdirective (#9405)relative: trueoption to resolve content paths relative to the config file (#9396)supports-*variant (#9453)min-*andmax-*variants (#9558)aria-*variants (#9557, #9588)data-*variants (#9559, #9588)break-keeputility forword-break: keep-all(#9393)collapseutility forvisibility: collapse(#9181)fill-noneutility forfill: none(#9403)stroke-noneutility forstroke: none(#9403)place-content-baselineutility forplace-content: baseline(#9498)place-items-baselineutility forplace-items: baseline(#9507)content-baselineutility foralign-content: baseline(#9507)font-feature-settingsfor a font family (#9039)node16-linux-armv7) (#9084)outline-offset(#9136)matchUtilities(#9541)min/max/clamp(#9237)sortfunction inmatchVariant(#9423)postcss-nestedv6.0 (#9546)Fixed
respectDefaultRingColorOpacity(#9070)@apply-ing a selector with joined classes (#9107)outline-hiddenutility (#9147)hiddenattribute on elements in preflight (#9174)fontFamilyconfig TypeScript types (#9214):where()and:has()(#9309)nullorundefined) when resolving the classList for intellisense (#9385)contentkey in custom plugin configs (#9502, #9545)--contentis used in the CLI when passed (#9587)v3.1.8Compare Source
Fixed
@applyof user utilities when negative and non-negative versions both exist (#9027)v3.1.7Compare Source
Fixed
@layerrules (#8971)Added
resolveConfig(#8924)v3.1.6Compare Source
Fixed
theme()in CSS (#8831)v3.1.5Compare Source
Added
font-weightfor each font size utility (#8763)Fixed
tailwindcssandautoprefixerinpostcss.config.jsin standalone CLI (#8769)v3.1.4Compare Source
Fixed
<alpha-value>when usingtheme()(#8652)/that are preceded by numbers (#8688)v3.1.3Compare Source
Fixed
corePluginListtype definition (#8587)addVariant(#8608)theme()function when using quotes (#8625)::marker(#8622)v3.1.2Compare Source
Fixed
\is a valid arbitrary variant token (#8576)postcss-importin the CLI by default in watch mode (#8574, #8580)v3.1.1Compare Source
Fixed
::backdropinto separate defaults group (#8567)v3.1.0Compare Source
Fixed
@apply(#8125)@applyrules (#8213)[hidden]style in preflight (#8248)importantselector to the front when@apply-ing selector-modifying variants in custom utilities (#8313)matchVariantthat use at-rules and placeholders (#8392)tailwindcss/plugin(#8400)addVariantormatchVariantcallback functions (#8455)postcssinstallation first in the CLI (#8270)tovalue from parent gradients (#8489)@import 'tailwindcss/...'without node_modules (#8537)Changed
Added
Documentnodes (#7291)text-startandtext-endutilities (#6656)darkMode: 'class'(#5800)--polloption to the CLI (#7725)border-spacingutilities (#7102)enabledvariant (#7905)tailwind.config.jsfile (#7891)backdropvariant (#7924, #8526)grid-flow-denseutility (#8193)mix-blend-plus-lighterutility (#8288)matchVariantAPI (#8310, 34fd0fb8)prefers-contrastmedia query variants (#8410)themefunction (#8416)postcss-importsupport to the CLI (#8437)optionalvariant (#8486)<alpha-value>placeholder support for custom colors (#8501)Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Renovate Bot.
⚠️ Artifact update problem
Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.
♻ Renovate will retry this branch, including artifacts, only when one of the following happens:
The artifact failure details are included below:
File name: pnpm-lock.yaml
View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.