Update dependency tailwindcss to v4 #194
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.3.3->4.1.17Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.1.17Compare Source
Fixed
@variantinside legacy JS APIs (#19263)v4.1.16Compare Source
Fixed
&(#19184)& > :pseudoand& :pseudoarbitrary variants (#19178)v4.1.15Compare Source
Fixed
color-mixfallback (#19069):deep,:slotted, and:global(#19094)not-*,has-*, andin-*(#19100)theme(…)function (#19111)\tis used in at-rules (#19130)0values (#19095)break-wordstowrap-break-word(#19157)Changed
postinstallscript from oxide ([#19149])(https://github.com/tailwindlabs/tailwindcss/pull/19149)v4.1.14Compare Source
Fixed
'syntax in ClojureScript when extracting classes (#18888)@variantinside@custom-variant(#18885)@utility(#18900)grid-columnutilities when configuringgrid-column-startorgrid-column-end(#18907)grid-rowutilities when configuringgrid-row-startorgrid-row-end(#18907)defaultexport condition for@tailwindcss/vite(#18948)@themeproduce no output when built (#18979)variant = 'outline'during upgrades (#18922)classNameis migrated (#19031)*ClassNameand*Classattributes (#19031)v4.1.13Compare Source
Changed
Fixed
visibilitywhen usingtransition(#18795)matchVariantvalues (#18798)clipwithclip-pathinsr-only(#18769)matchUtilities(#18820).vercelfolders by default (can be overridden by@source …rules) (#18855)@-to be invalid (e.g.@-2xl:flex) (#18869)-or_(#18867, #18872)ariatheme keys to@custom-variant(#18815)datatheme keys to@custom-variant(#18816)supportstheme keys to@custom-variant(#18817)v4.1.12Compare Source
Fixed
@apply(#18404)flex-<number>utilities (#18642))from interfering with extraction in Clojure keywords (#18345)@pluginand@config(#18345)process.env.DEBUGin@tailwindcss/node(#18485)falseorundefinedproperties (#18571)@tailwindcss/postcssviatransformAssetUrls: false(#18321)addEventListenerand JavaScript variable names (#18718)--border-color-*theme keys individe-*utilities for backwards compatibility (#18704).hdrand.exrfiles for classes by default (#18734)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
@variantinside legacy JS APIs (#19263)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.18Compare Source
Fixed
supports-[…]queries in arbitrary values (#13605)require.cacheerror 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-configfor better ESM and TypeScript PostCSS config support with the CLI (#18938)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
supports-[…]queries in arbitrary values (#13605)require.cacheerror 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-configfor better ESM and TypeScript PostCSS config support with the CLI (#18938)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)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
a364c212cbtob97974cbeab97974cbeato0532f430e00532f430e0to4078c36ec64078c36ec6to99b906c1d899b906c1d8tob4281b07ebb4281b07ebtofabd6202d3fabd6202d3to78179b591c78179b591ctofec000700afec000700atoedc1c0526eedc1c0526eto6a1ba371826a1ba37182to5ef2f1816c5ef2f1816cto2ecdcf30642ecdcf3064todce3ba0429View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.