chore(deps): update dependency tailwindcss to v4#50
chore(deps): update dependency tailwindcss to v4#50renovate[bot] wants to merge 1 commit intomainfrom
Conversation
f5af5e4 to
0a33a43
Compare
d035048 to
5e6c216
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR updates the TailwindCSS dependency from version 3.4.10 to 4.0.0, which is a major version upgrade introducing significant breaking changes and new features including a new high-performance engine, CSS-first configuration, and modernized color palette.
Key Changes
- Major version upgrade from TailwindCSS v3.4.10 to v4.0.0
- This represents a breaking change requiring configuration migration and potential template updates
- The upgrade brings performance improvements and new CSS-first configuration approach
| @@ -69,7 +69,7 @@ | |||
| "typescript": "5.8.2", | |||
| "typescript-eslint": "8.41.0", | |||
| "postcss": "^8.4.38", | |||
| "tailwindcss": "^3.4.10", | |||
| "tailwindcss": "^4.0.0", | |||
There was a problem hiding this comment.
This major version upgrade from TailwindCSS v3 to v4 introduces breaking changes that require configuration migration. The new version uses CSS-first configuration instead of JavaScript config files, changes the color palette, and modifies many utility class names. Consider using the automated upgrade tool mentioned in the release notes (@tailwindcss/upgrade) and reviewing the upgrade guide to ensure compatibility with existing templates and styles.
5e6c216 to
3fc8c72
Compare
2e59537 to
0d3bdf9
Compare
eb8bf56 to
964f7d9
Compare
964f7d9 to
875bdb6
Compare
4315146 to
302dfd4
Compare
5b253d5 to
6ec71c3
Compare
6ec71c3 to
643cf58
Compare
d77be19 to
9b3ec85
Compare
9b3ec85 to
c6d58e7
Compare
c6d58e7 to
1d9d0a0
Compare
06d442c to
388d797
Compare
388d797 to
86d5216
Compare
86d5216 to
86fc2e2
Compare
86fc2e2 to
00f3bc2
Compare
00f3bc2 to
c4a7243
Compare
8de8e67 to
4b433fc
Compare
4b433fc to
7059771
Compare
This PR contains the following updates:
^3.4.10→^4.0.0Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.2.4Compare Source
Fixed
@importand@pluginstill resolve correctly when using Vite aliases in@tailwindcss/vite(#19947)v4.2.3Compare Source
Fixed
tracking-*utilities by preferring non-negative utilities (e.g.-tracking-tighter→tracking-wider) (#19827)@tailwindcss/webpack(#19723)px-[1.2rem] py-[1.2rem]→p-[1.2rem]) (#19837)border-{t,b}-*intoborder-y-*,border-{l,r}-*intoborder-x-*, andborder-{t,r,b,l}-*intoborder-*(#19842)scroll-m{t,b}-*intoscroll-my-*,scroll-m{l,r}-*intoscroll-mx-*, andscroll-m{t,r,b,l}-*intoscroll-m-*(#19842)scroll-p{t,b}-*intoscroll-py-*,scroll-p{l,r}-*intoscroll-px-*, andscroll-p{t,r,b,l}-*intoscroll-p-*(#19842)overflow-{x,y}-*intooverflow-*(#19842)overscroll-{x,y}-*intooverscroll-*(#19842)--placeholder-colorinstead of--background-colorforplaceholder-*utilities (#19843)config.contentwhen migrating from Tailwind CSS v3 to Tailwind CSS v4 (#19846).envand.env.*to default ignored content files (#19846)overflow-ellipsisintotext-ellipsis(#19849)start-full→inset-s-full,start-auto→inset-s-auto,start-px→inset-s-px, andstart-<number>→inset-s-<number>as well as negative versions (#19849)end-full→inset-e-full,end-auto→inset-e-auto,end-px→inset-e-px, andend-<number>→inset-e-<number>as well as negative versions (#19849)-sign inside the arbitrary value-left-[9rem]→left-[-9rem](#19858)-sign outside the arbitrary valueml-[calc(-1*var(--width))]→-ml-(--width)(#19858)NODE_PATHenvironment variable in standalone CLI (#19617)v4.2.2Compare Source
Fixed
row-constructor(#19725)calc(var(--spacing)*…)expressions into--spacing(…)(#19769)@propertyat-rules (e.g.shadow-sm border) (#19727)@tailwindcss/vite(#19745)@tailwindcss/vite(#19790)w-1234 h-1234→size-1234) (#19809)w-5 h-5 size-5→''instead ofsize-5) (#19812)v4.2.1Compare Source
Fixed
.characters within curly braces in MDX files (#19711)v4.2.0Compare Source
Added
@tailwindcss/webpackpackage to run Tailwind CSS as a webpack plugin (#19610)pbs-*andpbe-*utilities forpadding-block-startandpadding-block-end(#19601)mbs-*andmbe-*utilities formargin-block-startandmargin-block-end(#19601)scroll-pbs-*andscroll-pbe-*utilities forscroll-padding-block-startandscroll-padding-block-end(#19601)scroll-mbs-*andscroll-mbe-*utilities forscroll-margin-block-startandscroll-margin-block-end(#19601)border-bs-*andborder-be-*utilities forborder-block-startandborder-block-end(#19601)inline-*,min-inline-*,max-inline-*utilities forinline-size,min-inline-size, andmax-inline-size(#19612)block-*,min-block-*,max-block-*utilities forblock-size,min-block-size, andmax-block-size(#19612)inset-s-*,inset-e-*,inset-bs-*,inset-be-*utilities forinset-inline-start,inset-inline-end,inset-block-start, andinset-block-end(#19613)font-features-*utility forfont-feature-settings(#19623)Fixed
@supportswrapper forcolor-mixvalues (#19450)@source inline()argument (#19461)@tailwindcss/cli(#19447)@utilityname validation with Oxide scanner rules (#19524)@variantinside@custom-variant(#19633).25inaspect-*fractions (e.g.aspect-8.5/11) (#19688)@sourcetrigger a full page reload when using@tailwindcss/vite(#19670)@tailwindcss/vite(#19677)@utilitynames to improve support with formatters such as Biome (#19626).jjto default ignored content directories (#19687)Deprecated
start-*andend-*utilities in favor ofinset-s-*andinset-e-*utilities (#19613)v4.1.18Compare Source
Fixed
source(…)happens relative to the file it is in (#19274)!in the value (#19243)@tailwindcss/vite(#18970)--watch(#19373)ringColor.DEFAULT) in JS configs (#19348)contenttheme key from JS configs (#19381)futureandexperimentalconfig keys (#19344)text-*andleading-*classes (#19396)@keyframes(#19419)/dev/stdout(#19421)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])(#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)_within arbitrary modifier shorthandbg-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
'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.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 like `outliConfiguration
📅 Schedule: (UTC)
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.