chore(deps): update dependency tailwindcss to v4#50
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
990ab9d to
92bede5
Compare
92bede5 to
447867e
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
447867e to
27c2f6c
Compare
27c2f6c to
3ff1c0d
Compare
This PR contains the following updates:
^3.4.10→^4.0.0Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.3.2Compare Source
Fixed
auto-rows-*andauto-cols-*utilities (e.g.auto-rows-12andauto-cols-16) (#20229)@tailwindcss/cliin--watchmode from crashing on Windows when@sourcepoints to a directory that doesn't exist (#20242)@tailwindcss/vitefrom crashing in Deno v2.8.x whencontext.parentURLis not a valid URL (#20245)@tailwindcss/cliin--watchmode rebuilds when the input CSS file changes in an ignored directory (#20246)@variantrules used inaddBase(…)to use custom variants defined later (#20247)@tailwindcss/vitefrom crashing during HMR when scanned files or directories are deleted (#20259)font-sizeinstead ofcolordeclarations fortext-[--spacing(…)](#20260)@sourcepatterns from scanning unrelated sibling files and folders (#20263)%]…[%in.tt,.tt2, and.txfiles (#20269)p.text-black[condition](#20269)@position-tryrules from triggering unknown at-rule warnings when optimizing CSS (#20277)--opacitytheme values (#20287)@tailwindcss/postcsswhen used with newer PostCSS patch releases (#20289)v4.3.1Compare Source
Added
--silentoption to suppress output in@tailwindcss/cli(#20100)Fixed
Module#registerHooksinstead ofModule#registeron Node 26+ (#20028)@applyto be used with CSS mixins (#19427)not-*correctly negates@containerqueries, includingstyle(…)queries (#20059)drop-shadow-*color utilities work with custom shadow values containingcalc(…)(#20080)@tailwindcss/vite(#20103)@tailwindcss/webpackcan be installed in Rspack projects without requiringwebpackas a peer dependency (#20027)calc(…)expressions (e.g.px-[calc(1rem+0px)]→px-[calc(1rem+0)]) (#20127)left-[99999px]→left-[99999px], notleft-24999.75) (#20130)@tailwindcss/cliin--watchmode recovers when a tracked dependency is deleted and restored (#20137)@tailwindcss/clibinaries are ignored when scanning for class candidates (#20139)addClass(…)andremoveClass(…)calls (#20198)@variantto be used insideaddBase(#19480)@sourceglobs with symlinks are preserved (#20203)@sourcerules can re-include files excluded by earlier@source notrules (#20203)@utilityrules (#20205)inset-shadow-noneand other inset shadows work correctly (#20208)@sourcedirectories are scanned even when ignored by git (#20214)@sourceglobs ending in**/*preserve dynamic path segments to avoid scanning too many files (#20217)calc(…)divisions when the result would require high precision (e.g.w-[calc(100%/3.5)]→w-[calc(100%/3.5)], notw-[28.571428571428573%]) (#20221)@tailwindcss/postcss(#20228)Changed
0instead ofcalc(var(--spacing) * 0)for spacing utilities likem-0andleft-0(#20196)var(--spacing)instead ofcalc(var(--spacing) * 1)for spacing utilities likem-1andleft-1(#20196)v4.3.0Compare Source
Added
@container-sizeutility (#18901)scrollbar-{auto,thin,none}utilities forscrollbar-width, andscrollbar-thumb-*/scrollbar-track-*color utilities forscrollbar-color(#19981, #20019)scrollbar-gutter-*utilities (#20018)zoom-*utilities (#20020)tab-*utilities (#20022)@variantwith stacked variants (e.g.@variant hover:focus { … }) (#19996)@variantwith compound variants (e.g.@variant hover, focus { … }) (#19996)--default(…)in--value(…)and--modifier(…)for functional@utilitydefinitions (#19989)Fixed
@pluginresolves package JavaScript entries instead of browser CSS entries when using@tailwindcss/vite(#19949)@importand@pluginpaths resolving from the wrong directory when using@tailwindcss/vite(#19965)@variantare processed by@tailwindcss/vite(#19966)basewhenresult.opts.fromis not provided when using@tailwindcss/postcss(#19980)_whitespace in arbitrary values (#19986)w-[calc(100%---spacing(60))]→w-[calc(100%-(--spacing(60)))]) (#19986)-mt-[20in]→mt-[-20in], notmt-[-1920px]) (#19988):has()variants from[&:has(…)]tohas-[…](#19991)styleattributes (e.g.style="flex-grow: 1"→style="flex-grow: 1", notstyle="grow: 1") (#19918)@utilitydefinitions with the same name but different value types (#19777)PluginWithConfigtype fromtailwindcss/pluginto fix errors when inferring plugin config types (#19707)startandendlegacy utilities without values do not generate CSS (#20003)--value(…)is required in functional@utilitydefinitions (#20005)-left-[(var(--a)+var(--b))]) (#20011)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](httpConfiguration
📅 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.