chore: bump tailwindcss from 3.4.17 to 4.0.0 #371

Closed

martinr92 wants to merge 1 commit from dependabot-npm_and_yarn-develop-tailwindcss-4.0.0 into develop

martinr92 commented

2025-01-23 03:57:17 +00:00

(Migrated from gitlab.com)

Bumps tailwindcss from 3.4.17 to 4.0.0.

Release notes

Sourced from tailwindcss's releases.

v4.0.0

Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

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.

v4.0.0-beta.10

Added

Add support for using @variant to use variants in your CSS (#15663)

Include outline-color when transitioning colors (#15690)

Fixed

Add missing main and browser fields for @tailwindcss/browser (#15594)

Support escaping * in theme namespace syntax (e.g.: --color-\*: initial;) (#15603)

Respect @theme options when resolving values in custom functional utilities (#15623)

Discard invalid variants (e.g. data-checked-[selected=1]:*) (#15629)

Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)

Write to stdout when --output is set to - or omitted with @tailwindcss/cli (#15656)

Prevent not-* from being used with variants that have multiple sibling rules (#15689)

Upgrade (experimental): Pretty print --spacing(…) to prevent ambiguity (#15596)

Changed

Use more modern --alpha(color / 50%) syntax instead of --alpha(color, 50%) (#15665)

... (truncated)

Changelog

Sourced from tailwindcss's changelog.

[4.0.0] - 2025-01-21

[4.0.0-beta.10] - 2025-01-21

Added

Add support for using @variant to use variants in your CSS (#15663)

Include outline-color when transitioning colors (#15690)

Fixed

Add missing main and browser fields for @tailwindcss/browser (#15594)

Support escaping * in theme namespace syntax (e.g.: --color-\*: initial;) (#15603)

Respect @theme options when resolving values in custom functional utilities (#15623)

Discard invalid variants (e.g. data-checked-[selected=1]:*) (#15629)

Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)

Write to stdout when --output is set to - or omitted with @tailwindcss/cli (#15656)

Prevent not-* from being used with variants that have multiple sibling rules (#15689)

Upgrade (experimental): Pretty print --spacing(…) to prevent ambiguity (#15596)

Changed

Use more modern --alpha(color / 50%) syntax instead of --alpha(color, 50%) (#15665)

Rename @variant to @custom-variant (#15663)

Change outline-hidden to set outline-style: none except in forced colors mode (#15690)

[4.0.0-beta.9] - 2025-01-09

Added

Add @tailwindcss/browser package to run Tailwind CSS in the browser (#15558)

Add @reference "…" API as a replacement for the previous @import "…" reference option (#15565)

Add support for defining functional utilities in CSS (#15455)

Add new --spacing(…), --alpha(…), and --theme(…) CSS functions (#15572)

Add musl-based Linux builds of the standalone CLI (#15567)

Improve performance of internal AST manipulations (#15529)

Fixed

Use the correct property value for place-content-between, place-content-around, and place-content-evenly utilities (#15440)

Don’t detect arbitrary properties when preceded by an escape (#15456)

Fix incorrectly named bg-round and bg-space utilities to bg-repeat-round to bg-repeat-space (#15462)

Fix inset-shadow-* suggestions in IntelliSense (#15471)

Only compile arbitrary values ending in ] (#15503)

Ensure @apply rules are processed in the correct order (#15542)

Allow negative utility names in @utility (#15573)

Remove all @keyframes contributed by JavaScript plugins when using @reference imports (#15581)

Upgrade (experimental): Do not extract class names from functions (e.g. shadow in filter: 'drop-shadow(…)') (#15566)

Upgrade (experimental): Migrate theme(spacing.2) to --spacing(2) (#15579)

Upgrade (experimental): Migrate theme(…) to --theme(…) (#15579)

... (truncated)

Commits

a8c54ac Prepare v4.0.0 release (#15693)
8a97a6a v4.0.0-beta.10 (#15691)
4820f6b Transition outline-color (#15690)
79f21a8 Prevent not-* from being used with variants with multiple sibling rules (#1...
4035ab0 Implement @variant (#15663)
a51b214 Use more modern --alpha(color / 50%) syntax (#15665)
2f8c517 Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)
528c848 Discard invalid variants such as data-checked-[selected=1]:* (#15629)
2de644b Remove @property fallbacks for Firefox (#15622)
da2da51 Resolve values in functional utilities based on @theme options (#15623)
Additional commits viewable in compare view

Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) from 3.4.17 to 4.0.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/tailwindlabs/tailwindcss/releases">tailwindcss's releases</a>.</em></p> <blockquote> <h2>v4.0.0</h2> <p><a href="https://tailwindcss.com/blog/tailwindcss-v4"><img src="https://github.com/user-attachments/assets/cf527dc2-7e42-4884-9628-dbb27459d2aa" alt="" /></a></p> <p>Holy shit it's actually done — we just tagged Tailwind CSS v4.0.</p> <p>Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.</p> <ul> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#new-high-performance-engine">New high-performance engine</a> — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web">Designed for the modern web</a> — built on cutting-edge CSS features like cascade layers, registered custom properties with <code>@property</code>, and <code>color-mix()</code>.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#simplified-installation">Simplified installation</a> — fewer dependencies, zero configuration, and just a single line of code in your CSS file.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#first-party-vite-plugin">First-party Vite plugin</a> — tight integration for maximum performance and minimum configuration.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#automatic-content-detection">Automatic content detection</a> — all of your template files are discovered automatically, with no configuration required.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#built-in-import-support">Built-in import support</a> — no additional tooling necessary to bundle multiple CSS files.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration">CSS-first configuration</a> — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#css-theme-variables">CSS theme variables</a> — all of your design tokens exposed as native CSS variables so you can access them anywhere.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants">Dynamic utility values and variants</a> — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#modernized-p3-color-palette">Modernized P3 color palette</a> — a redesigned, more vivid color palette that takes full advantage of modern display technology.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#container-queries">Container queries</a> — first-class APIs for styling elements based on their container size, no plugins required.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#new-3d-transform-utilities">New 3D transform utilities</a> — transform elements in 3D space directly in your HTML.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#expanded-gradient-apis">Expanded gradient APIs</a> — radial and conic gradients, interpolation modes, and more.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#starting-style-support"><code>@starting-style support</code></a> — a new variant you can use to create enter and exit transitions, without the need for JavaScript.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#not-variant">not-* variant</a> — style an element only when it doesn't match another variant, custom selector, or media or feature query.</li> <li><a href="https://tailwindcss.com/blog/tailwindcss-v4#even-more-new-utilities-and-variants">Even more new utilities and variants</a> — including support for <code>color-scheme</code>, <code>field-sizing</code>, complex shadows, <code>inert</code>, and more.</li> </ul> <p>Start using Tailwind CSS v4.0 today by <a href="https://tailwindcss.com/docs/installation/">installing it in a new project</a>, or playing with it directly in the browser on <a href="https://play.tailwindcss.com/">Tailwind Play</a>.</p> <p>For existing projects, we've published a comprehensive <a href="https://tailwindcss.com/docs/upgrade-guide">upgrade guide</a> and built an <a href="https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool">automated upgrade tool</a> to get you on the latest version as quickly and painlessly as possible.</p> <p>For a deep-dive into everything that's new, <a href="https://tailwindcss.com/blog/tailwindcss-v4">check out the announcement post</a>.</p> <h2>v4.0.0-beta.10</h2> <h3>Added</h3> <ul> <li>Add support for using <code>@variant</code> to use variants in your CSS (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15663">#15663</a>)</li> <li>Include <code>outline-color</code> when transitioning colors (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15690">#15690</a>)</li> </ul> <h3>Fixed</h3> <ul> <li>Add missing <code>main</code> and <code>browser</code> fields for <code>@tailwindcss/browser</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15594">#15594</a>)</li> <li>Support escaping <code>*</code> in theme namespace syntax (e.g.: <code>--color-\*: initial;</code>) (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15603">#15603</a>)</li> <li>Respect <code>@theme</code> options when resolving values in custom functional utilities (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15623">#15623</a>)</li> <li>Discard invalid variants (e.g. <code>data-checked-[selected=1]:*</code>) (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15629">#15629</a>)</li> <li>Ensure <code>-outline-offset-*</code> utilities are suggested in IntelliSense (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15646">#15646</a>)</li> <li>Write to <code>stdout</code> when <code>--output</code> is set to <code>-</code> or omitted with <code>@tailwindcss/cli</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15656">#15656</a>)</li> <li>Prevent <code>not-*</code> from being used with variants that have multiple sibling rules (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15689">#15689</a>)</li> <li><em>Upgrade (experimental)</em>: Pretty print <code>--spacing(…)</code> to prevent ambiguity (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15596">#15596</a>)</li> </ul> <h3>Changed</h3> <ul> <li>Use more modern <code>--alpha(color / 50%)</code> syntax instead of <code>--alpha(color, 50%)</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15665">#15665</a>)</li> </ul>  </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/tailwindlabs/tailwindcss/blob/next/CHANGELOG.md">tailwindcss's changelog</a>.</em></p> <blockquote> <h2>[4.0.0] - 2025-01-21</h2> <h2>[4.0.0-beta.10] - 2025-01-21</h2> <h3>Added</h3> <ul> <li>Add support for using <code>@variant</code> to use variants in your CSS (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15663">#15663</a>)</li> <li>Include <code>outline-color</code> when transitioning colors (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15690">#15690</a>)</li> </ul> <h3>Fixed</h3> <ul> <li>Add missing <code>main</code> and <code>browser</code> fields for <code>@tailwindcss/browser</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15594">#15594</a>)</li> <li>Support escaping <code>*</code> in theme namespace syntax (e.g.: <code>--color-\*: initial;</code>) (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15603">#15603</a>)</li> <li>Respect <code>@theme</code> options when resolving values in custom functional utilities (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15623">#15623</a>)</li> <li>Discard invalid variants (e.g. <code>data-checked-[selected=1]:*</code>) (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15629">#15629</a>)</li> <li>Ensure <code>-outline-offset-*</code> utilities are suggested in IntelliSense (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15646">#15646</a>)</li> <li>Write to <code>stdout</code> when <code>--output</code> is set to <code>-</code> or omitted with <code>@tailwindcss/cli</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15656">#15656</a>)</li> <li>Prevent <code>not-*</code> from being used with variants that have multiple sibling rules (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15689">#15689</a>)</li> <li><em>Upgrade (experimental)</em>: Pretty print <code>--spacing(…)</code> to prevent ambiguity (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15596">#15596</a>)</li> </ul> <h3>Changed</h3> <ul> <li>Use more modern <code>--alpha(color / 50%)</code> syntax instead of <code>--alpha(color, 50%)</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15665">#15665</a>)</li> <li>Rename <code>@variant</code> to <code>@custom-variant</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15663">#15663</a>)</li> <li>Change <code>outline-hidden</code> to set <code>outline-style: none</code> except in forced colors mode (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15690">#15690</a>)</li> </ul> <h2>[4.0.0-beta.9] - 2025-01-09</h2> <h3>Added</h3> <ul> <li>Add <code>@tailwindcss/browser</code> package to run Tailwind CSS in the browser (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15558">#15558</a>)</li> <li>Add <code>@reference "…"</code> API as a replacement for the previous <code>@import "…" reference</code> option (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15565">#15565</a>)</li> <li>Add support for defining functional utilities in CSS (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15455">#15455</a>)</li> <li>Add new <code>--spacing(…)</code>, <code>--alpha(…)</code>, and <code>--theme(…)</code> CSS functions (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15572">#15572</a>)</li> <li>Add musl-based Linux builds of the standalone CLI (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15567">#15567</a>)</li> <li>Improve performance of internal AST manipulations (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15529">#15529</a>)</li> </ul> <h3>Fixed</h3> <ul> <li>Use the correct property value for <code>place-content-between</code>, <code>place-content-around</code>, and <code>place-content-evenly</code> utilities (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15440">#15440</a>)</li> <li>Don’t detect arbitrary properties when preceded by an escape (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15456">#15456</a>)</li> <li>Fix incorrectly named <code>bg-round</code> and <code>bg-space</code> utilities to <code>bg-repeat-round</code> to <code>bg-repeat-space</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15462">#15462</a>)</li> <li>Fix <code>inset-shadow-*</code> suggestions in IntelliSense (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15471">#15471</a>)</li> <li>Only compile arbitrary values ending in <code>]</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15503">#15503</a>)</li> <li>Ensure <code>@apply</code> rules are processed in the correct order (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15542">#15542</a>)</li> <li>Allow negative utility names in <code>@utility</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15573">#15573</a>)</li> <li>Remove all <code>@keyframes</code> contributed by JavaScript plugins when using <code>@reference</code> imports (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15581">#15581</a>)</li> <li><em>Upgrade (experimental)</em>: Do not extract class names from functions (e.g. <code>shadow</code> in <code>filter: 'drop-shadow(…)'</code>) (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15566">#15566</a>)</li> <li><em>Upgrade (experimental)</em>: Migrate <code>theme(spacing.2)</code> to <code>--spacing(2)</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15579">#15579</a>)</li> <li><em>Upgrade (experimental)</em>: Migrate <code>theme(…)</code> to <code>--theme(…)</code> (<a href="https://github.com/tailwindlabs/tailwindcss/pull/15579">#15579</a>)</li> </ul>  </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/a8c54acaba7d51875bd332163754fb8bc40939a4"><code>a8c54ac</code></a> Prepare v4.0.0 release (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15693">#15693</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/8a97a6a8d989fa4574709a9a67ffcf3204f4c605"><code>8a97a6a</code></a> v4.0.0-beta.10 (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15691">#15691</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/4820f6bff82ce0206dfdb7f31e3f65dd37355b6d"><code>4820f6b</code></a> Transition <code>outline-color</code> (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15690">#15690</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/79f21a8f4575f70648428f1f6e98f48ae57adcbc"><code>79f21a8</code></a> Prevent <code>not-*</code> from being used with variants with multiple sibling rules (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/1">#1</a>...</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/4035ab0b76bc4ada1986898f32fa8f52f0a138af"><code>4035ab0</code></a> Implement <code>@variant</code> (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15663">#15663</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/a51b214c133da316583edd018102b236114a96ac"><code>a51b214</code></a> Use more modern <code>--alpha(color / 50%)</code> syntax (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15665">#15665</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/2f8c51774e6c6fa1e75bb54eef2624853ef80afe"><code>2f8c517</code></a> Ensure <code>-outline-offset-*</code> utilities are suggested in IntelliSense (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15646">#15646</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/528c848575cdf1dac7594c8277450f16a8b9794b"><code>528c848</code></a> Discard invalid variants such as <code>data-checked-[selected=1]:*</code> (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15629">#15629</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/2de644b20e202354e96d51f0e732408442994dcc"><code>2de644b</code></a> Remove <code>@property</code> fallbacks for Firefox (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15622">#15622</a>)</li> <li><a href="https://github.com/tailwindlabs/tailwindcss/commit/da2da51284280d131e1b8560dabdf04b6e75bfce"><code>da2da51</code></a> Resolve values in functional utilities based on <code>@theme</code> options (<a href="https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss/issues/15623">#15623</a>)</li> <li>Additional commits viewable in <a href="https://github.com/tailwindlabs/tailwindcss/commits/v4.0.0/packages/tailwindcss">compare view</a></li> </ul> </details> <br />

martinr92 commented

2025-01-23 03:57:17 +00:00

(Migrated from gitlab.com)

assigned to @martinr92

martinr92 commented

2025-01-23 03:57:24 +00:00

(Migrated from gitlab.com)

added 1 commit

ea3204a9 - chore: bump tailwindcss from 3.4.17 to 4.0.0

Compare with previous version

added 1 commit <ul><li>ea3204a9 - chore: bump tailwindcss from 3.4.17 to 4.0.0</li></ul> [Compare with previous version](/marty-media/server/-/merge_requests/347/diffs?diff_id=1242269593&start_sha=0b2017c1617f857e81d5ce1e4069701af2a0a918)

martinr92 commented

2025-01-30 03:57:36 +00:00

(Migrated from gitlab.com)

This merge request has been superseded by !349+

martinr92 (Migrated from gitlab.com) closed this pull request

2025-01-30 03:57:37 +00:00