design-system chore(deps): update dependency tailwindcss to v4

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
tailwindcss (source)	`3.4.17` -> `4.1.5`

Release Notes

tailwindlabs/tailwindcss (tailwindcss)

`v4.1.5`

Compare Source

Added

Support using @tailwindcss/upgrade to upgrade between versions of v4.* (#17717)
Add h-lh / min-h-lh / max-h-lh utilities (#17790)
Transition display, visibility, content-visibility, overlay, and pointer-events when using transition to simplify @starting-style usage (#17812)

Fixed

Don't scan .geojson or .db files for classes by default (#17700, #17711)
Hide default shadow suggestions when missing default shadow theme keys (#17743)
Replace _ with . in theme suggestions for @utility if surrounded by digits (#17733)
Skip color-mix(…) when opacity is 100% (#17815)
PostCSS: Ensure that errors in imported stylesheets are recoverable (#17754)
Upgrade: Bump all Tailwind CSS related dependencies during upgrade (#17763)
Upgrade: Don't add - to variants starting with @ (#17814)
Upgrade: Don't format stylesheets that didn't change when upgrading (#17824)

`v4.1.4`

Compare Source

Added

Add experimental @tailwindcss/oxide-wasm32-wasi target for running Tailwind in browser environments like StackBlitz (#17558)

Fixed

Ensure color-mix(…) polyfills do not cause used CSS variables to be removed (#17555)
Ensure color-mix(…) polyfills create fallbacks for theme variables that reference other theme variables (#17562)
Fix brace expansion in declining ranges like {10..0..5} and {0..10..-5} (#17591)
Work around a Chrome rendering bug when using the skew-* utilities (#17627)
Ensure container query variant names can contain hyphens (#17628)
Ensure shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit inherit the shadow color (#17647)
Ensure compatibility with array tuples used in fontSize JS theme keys (#17630)
Ensure folders with binary file extensions in their names are scanned for utilities (#17595)
Upgrade: Convert fontSize array tuple syntax to CSS theme variables (#17630)

`v4.1.3`

Compare Source

Fixed

Show warning when using unsupported bare value data type in --value(…) (#17464)
PostCSS: Ensure changes to the input CSS file don't generate stale output when using Turbopack (#17554)
Ensure classes are detected in Ruby's %w syntax in Slim templates (#17557)

`v4.1.2`

Compare Source

Fixed

Don't rely on the presence of @layer base to polyfill @property (#17506)
Support setting multiple inset shadows as arbitrary values (#17523)
Fix drop-shadow-* utilities that are defined with multiple shadows (#17515)
PostCSS: Fix race condition when two changes are queued concurrently (#17514)
PostCSS: Ensure files containing @tailwind utilities are processed (#17514)
Ensure the color-mix(…) polyfill creates fallbacks even when using colors that cannot be statically analyzed (#17513)
Fix slow incremental builds with @tailwindcss/vite and @tailwindcss/postscss (especially on Windows) (#17511)
Vite: Fix missing CSS file in Qwik setups (#17533)

`v4.1.1`

Compare Source

Fixed

Disable padding in @source inline(…) brace expansion (#17491)
Inject polyfills after @import and body-less @layer (#17493)
Ensure @tailwindcss/cli does not contain an import for jiti (#17502)

`v4.1.0`

Compare Source

Added

Add details-content variant (#15319)
Add inverted-colors variant (#11693)
Add noscript variant (#11929, #17431)
Add items-baseline-last and self-baseline-last utilities (#13888, #17476)
Add pointer-none, pointer-coarse, and pointer-fine variants (#16946)
Add any-pointer-none, any-pointer-coarse, and any-pointer-fine variants (#16941)
Add safe alignment utilities (#14607)
Add user-valid and user-invalid variants (#12370)
Add wrap-anywhere, wrap-break-word, and wrap-normal utilities (#12128)
Add @source inline(…) and @source not inline(…) (#17147)
Add @source not "…" (#17255)
Add text-shadow-* utilities (#17389)
Add mask-* utilities (#17134)
Add bg-{position,size}-* utilities for arbitrary values (#17432)
Add shadow-*/<alpha>, inset-shadow-*/<alpha>, drop-shadow-*/<alpha>, and text-shadow-*/<alpha> utilities to control shadow opacity (#17398, #17434)
Add drop-shadow-<color> utilities (#17434)
Improve compatibility with older versions of Safari and Firefox (#17435)

Fixed

Follow symlinks when resolving @source directives (#17391)
Don't scan ignored files for classes when changing an ignored file triggers a rebuild using @tailwindcss/cli (#17255)
Support negated content rules in legacy JavaScript configuration (#17255)
Interpret syntax like @("@")md:… as @md:… in Razor files (#17427)
Disallow top-level braces, top-level semicolons, and unbalanced parentheses and brackets in arbitrary values (#17361)
Ensure the --theme(…) function still resolves to the CSS variables when using legacy JS plugins (#17458)
Detect used theme variables in CSS module files (#17433, #17467)

Changed

Ignore node_modules by default (can be overridden by @source … rules) (#17255)
@source rules that include file extensions or point inside node_modules/ folders no longer consider your .gitignore rules (#17255)
Deprecate bg-{left,right}-{top,bottom} in favor of bg-{top,bottom}-{left,right} utilities (#17378)
Deprecate object-{left,right}-{top,bottom} in favor of object-{top,bottom}-{left,right} utilities (#17437)

`v4.0.17`

Compare Source

Fixed

Fix an issue causing the CLI to hang when processing Ruby files (#17383)

`v4.0.16`

Compare Source

Added

Add support for literal values in --value('…') and --modifier('…') (#17304)

Fixed

Fix class extraction followed by ( in Pug (#17320)
Ensure @keyframes for theme animations are emitted if they are referenced following a comma (#17352)
Vite: Ensure that updates to an imported CSS file are properly propagated after updating source files (#17347)
Pre process Slim templates embedded in Ruby files (#17336)
Error when input and output files resolve to the same file when using the CLI (#17311)
Add missing suggestions when --spacing(--value(integer, number)) is used (#17308)
Add ::-webkit-details-marker pseudo to marker variant (#17362)

`v4.0.14`

Compare Source

Fixed

Do not extract candidates with JS string interpolation ${ (#17142)
Fix extraction of variants containing . character (#17153)
Fix extracting candidates in Clojure/ClojureScript (#17087)

`v4.0.13`

Compare Source

Fixed

Fix Haml pre-processing (#17051)
Ensure .node and .wasm files are not scanned for utilities (#17123)
Improve performance when scanning JSON files (#17125)
Fix extracting candidates containing dots in Haml, Pug, and Slim pre processors (#17094, #17085, #17113)
Don't create invalid CSS when encountering a link wrapped in square brackets (#17129)

`v4.0.12`

Compare Source

Fixed

Vite: Fix url(…) rebasing in transitively imported CSS files (#16965)
PostCSS: Rebase url(…)s in imported CSS files (#16965)
Ensure utilities are sorted based on their actual property order (#16995)
Ensure strings in Pug and Slim templates are handled correctly (#17000)
Ensure classes between } and { are properly extracted (#17001)
Add razor/cshtml pre processing (#17027)
Ensure extracting candidates from JS embedded in a PHP string works as expected (#17031)

`v4.0.11`

Compare Source

Fixed

Ensure classes containing -- are extracted correctly (#16972)
Ensure classes containing numbers followed by dash or underscore are extracted correctly (#16980)
Ensure arbitrary container queries are extracted correctly (#16984)
Ensure classes ending in [ are extracted in Slim templating language (#16985)
Ensure arbitrary variables with data types are extracted correctly (#16986)

`v4.0.10`

Compare Source

Added

Add col-<number> and row-<number> utilities for grid-column and grid-row (#15183)

Fixed

Ensure not-* does not remove :is(…) from variants (#16825)
Ensure @keyframes are correctly emitted when using a prefix (#16850)
Don't swallow @utility declarations when @apply is used in nested rules (#16940)
Ensure outline-hidden behaves like outline-none outside of forced colors mode (#16943)
Allow !important on CSS variables again (#16873)
Vite: Do not crash when encountering an .svg file with # or ? in the filename (#16957)
Ensure utilities are properly detected within square brackets (#16306)
Ensure utilities are properly detected using Angular's conditional class binding syntax (#16306)
Ensure utilities starting with numbers are properly extracted from Slim templates (#16306)
Discard arbitrary property candidates that have guaranteed-invalid property names (#16306)

Changed

Removed max-w-auto and max-h-auto utilities as they generate invalid CSS (#16917)
Replaced the existing candidate extractor with a brand new extractor to improve maintainability, correctness, and performance (#16306)

`v4.0.9`

Compare Source

Fixed

Make JS APIs available to plugins and configs in the Standalone CLI (#15934)
Vite: Don't crash when importing a virtual module from JavaScript that ends in .css (#16780)
Fix an issue where @reference "…" would sometimes omit keyframe animations (#16774)
Ensure z-*! utilities are properly marked as !important (#16795)
Read UTF-8 CSS files that start with a byte-order mark (BOM) (#16796)
Ensure nested functions in selectors used with JavaScript plugins are not truncated (#16802)

Changed

Emit variable fallbacks when using @reference "…" instead of duplicate CSS variable declarations (#16774)

`v4.0.8`

Compare Source

Added

Allow @import with theme(…) options for stylesheets that contain more than just @theme rules (#16514)

Fixed

Don't add !important to CSS variable declarations when using the important modifier (#16668)
Vite: Ignore files and directories specified in your .gitignore file when using automatic source detection(#16631)
Vite: Don't rely on the module graph for detecting candidates to ensure setups with multiple Vite builds work as expected (#16631)
Vite: Ensure Astro production builds always contain classes used in client-only components (#16631)
Vite: Always scan raw file contents for utility classes before any other transforms have been applied to ensure utility classes are scanned without any additional escaping (#16631)
Ensure utilities with more declarations are always sorted before utilities with fewer declarations when utilities only define CSS variables (#16715)
Only include translate-z-px utilities once in compiled CSS (#16718)

Changed

Don't include theme variables that aren't used in compiled CSS (#16211, #16676)

`v4.0.7`

Compare Source

Fixed

Export tailwindcss/lib/util/flattenColorPalette.js for backward compatibility (#16411)
Fix sorting of numeric utility suggestions when they have different magnitudes (#16414)
Show suggestions for fractions in IntelliSense (#16353)
Don’t replace _ in suggested theme keys (#16433)
Ensure --default-outline-width can be used to change the outline-width value of the outline utility (#16469)
Ensure drop shadow utilities don't inherit unexpectedly (#16471)
Export config and plugin types from tailwindcss/plugin for backward compatibility (#16505)
Ensure JavaScript plugins that emit nested rules referencing the utility name work as expected (#16539)
Statically link Visual Studio redistributables in @tailwindcss/oxide Windows builds (#16602)
Ensure that Next.js splat routes are scanned for classes (#16457)
Pin exact version of tailwindcss in @tailwindcss/* packages (#16623)
Upgrade: Report errors when updating dependencies (#16504)
Upgrade: Ensure a darkMode JS config setting with block syntax converts to use @slot (#16507)
Upgrade: Ensure the latest version of tailwindcss and @tailwindcss/postcss are installed when upgrading (#16620)

`v4.0.6`

Compare Source

Fixed

Revert change to no longer include theme variables that aren't used in compiled CSS (#16403)
Upgrade: Don't migrate blur to blur-sm when used with Next.js <Image placeholder="blur" /> (#16405)

`v4.0.5`

Compare Source

Added

Add @theme static option for always including theme variables in compiled CSS (#16211)

Fixed

Remove rogue console.log from @tailwindcss/vite (#16307)

Changed

Don't include theme variables that aren't used in compiled CSS (#16211)

`v4.0.4`

Compare Source

Fixed

Fix a crash when setting JS theme values to null (#16210)
Ensure escaped underscores in CSS variables in arbitrary values are properly unescaped (#16206)
Ensure that the containers JS theme key is added to the --container-* namespace (#16169)
Ensure theme @keyframes are generated even if an --animation-* variable spans multiple lines (#16237)
Vite: Skip parsing stylesheets with the ?commonjs-proxy flag (#16238)
Fix order-first and order-last for Firefox (#16266)
Fix support for older instruction sets on Linux x64 builds of the standalone CLI (#16244)
Ensure NODE_PATH is respected when resolving JavaScript and CSS files (#16274)
Ensure Node addons are packaged correctly with FreeBSD builds (#16277)
Fix an issue where @variant inside a referenced stylesheet could cause a stack overflow (#16300)

`v4.0.3`

Compare Source

Fixed

Fix incorrect removal of @import url(); (#16144)

`v4.0.2`

Compare Source

Fixed

Only generate positive grid-cols-* and grid-rows-* utilities (#16020)
Ensure escaped theme variables are handled correctly (#16064)
Ensure we process Tailwind CSS features when only using @reference or @variant (#16057)
Refactor gradient implementation to work around prettier/prettier#17058 (#16072)
Vite: Ensure hot-reloading works with SolidStart setups (#16052)
Vite: Fix a crash when starting the development server in SolidStart setups (#16052)
Vite: Don't rebase URLs that appear to be aliases (#16078)
Vite: Transform <style> blocks in HTML files (#16069)
Prevent camel-casing CSS custom properties added by JavaScript plugins (#16103)
Do not emit @keyframes in @theme reference (#16120)
Discard invalid declarations when parsing CSS (#16093)
Do not emit empty CSS rules and at-rules (#16121)
Handle @variant when at the top-level of a stylesheet (#16129)

`v4.0.1`

Compare Source

Added

Include :open pseudo-class in existing open variant (#15349)

Fixed

Remove invalid min-w/h-none utilities (#15845)
Discard CSS variable shorthand utilities that don't use valid CSS variables (#15738)
Ensure font-size utilities with none modifier have a line-height set e.g. text-sm/none (#15921)
Ensure font-size utilities with unknown modifier don't generate CSS (#15921)
Don’t suggest font weight utilities more than once (#15857)
Suggest container query variants (#15857)
Disable bare value suggestions when not using the --spacing variable (#15857)
Ensure suggested classes are properly sorted (#15857)
Don’t look at .gitignore files outside initialized repos (#15941)
Find utilities when using the Svelte class shorthand syntax across multiple lines (#15974)
Find utilities when using the Angular class shorthand syntax (#15974)
Find utilities when using functions inside arrays (#15974)
Ensure that @tailwindcss/browser does not pollute the global namespace (#15978)
Ensure that tailwind-merge is not scanned when using the Vite plugin (#16005)
Ensure CSS theme variables are available within shadow roots (#15975)
Fix crash when project lives in the / directory (#15988)
Ensure custom variants have a non-empty selector list (#16009)
Upgrade: Ensure JavaScript config files on different drives are correctly migrated (#15927)
Upgrade: Migrate leading-[1] to leading-none (#16004)
Upgrade: Do not migrate arbitrary leading utilities to bare values (#16004)

`v4.0.0`

Compare Source

Added

New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
First-party Vite plugin — tight integration for maximum performance and minimum configuration.
Automatic content detection — all of your template files are discovered automatically, with no configuration required.
Built-in import support — no additional tooling necessary to bundle multiple CSS files.
CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
Container queries — first-class APIs for styling elements based on their container size, no plugins required.
New 3D transform utilities — transform elements in 3D space directly in your HTML.
Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
@starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
not-* variant — style an element only when it doesn't match another variant, custom selector, or media or feature query.
Even more new utilities and variants — including support for 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.

Configuration

📅 Schedule: Branch creation - "before 4am on the first day of the month" in timezone Europe/Zurich, Automerge - At any time (no schedule defined).

🚦 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.

[ ] If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

Mar 03 '25 12:03 renovate[bot]

⚠️ No Changeset found

Latest commit: 9aa066b9d62e56dce4f2276ce585d0fae27a8ff9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Mar 03 '25 12:03 changeset-bot[bot]

Related Previews

https://preview-4851--temp-next-design-system-post.netlify.app
https://preview-4851--swisspost-design-system-next.netlify.app

Mar 03 '25 12:03 swisspost-bot

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	copyfiles@2.4.1
	cheerio@1.0.0
	concurrently@9.1.2

View full report

Mar 10 '25 17:03 socket-security[bot]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

Apr 02 '25 13:04 socket-security[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system-documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 6, 2025 10:59am

Apr 30 '25 18:04 vercel[bot]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

May 12 '25 10:05 sonarqubecloud[bot]

Closing this PR in favor of ticket #5368 "Update to Tailwind 4"

May 12 '25 14:05 alionazherdetska

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 4.x releases. But if you manually upgrade to 4.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

May 12 '25 14:05 renovate[bot]

design-system design-system copied to clipboard

chore(deps): update dependency tailwindcss to v4

Release Notes

Added

Fixed

Added

Fixed

Fixed

Fixed

Fixed

Added

Fixed

Changed

Fixed

Added

Fixed

Fixed

Fixed

Fixed

Fixed

Added

Fixed

Changed

Fixed

Changed

Added

Fixed

Changed

Fixed

Fixed

Added

Fixed

Changed

Fixed

Fixed

Fixed

Added

Fixed

Added

Configuration

⚠️ No Changeset found

Quality Gate passed

Renovate Ignore Notification

design-system
design-system copied to clipboard