From 1170cd76e5c22f28ea1f66f21b6653c7fa42b99b Mon Sep 17 00:00:00 2001 From: kwy404 Date: Fri, 25 Sep 2026 16:50:05 -0300 Subject: [PATCH 1/4] Recognize missing viewport and font-relative length units --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.test.ts | 23 +++++++++++++++++++ .../tailwindcss/src/utils/infer-data-type.ts | 18 +++++++++++++++ 3 files changed, 42 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5e6f6f89805..9b96acfad69b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512)) - Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508)) - Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513)) +- Treat viewport units like `dvmin` and `svi` and font-relative units like `cap` and `rex` as lengths in arbitrary values (e.g. `text-[10dvmin]` generates `font-size` instead of `color`) ([#XXXXX](https://github.com/tailwindlabs/tailwindcss/pull/XXXXX)) ## [4.3.3] - 2026-07-16 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 66b051d57961..ccc6ebbdeec8 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26917,6 +26917,29 @@ test('text', async () => { ).toEqual('') }) +test('text with viewport and font-relative length units', async () => { + expect(await run(['text-[1cap]', 'text-[1rex]', 'text-[1svi]', 'text-[1dvmin]'])) + .toMatchInlineSnapshot(` + " + .text-\\[1cap\\] { + font-size: 1cap; + } + + .text-\\[1dvmin\\] { + font-size: 1dvmin; + } + + .text-\\[1rex\\] { + font-size: 1rex; + } + + .text-\\[1svi\\] { + font-size: 1svi; + } + " + `) +}) + test('text-shadow', async () => { expect( await run( diff --git a/packages/tailwindcss/src/utils/infer-data-type.ts b/packages/tailwindcss/src/utils/infer-data-type.ts index 3317572f3e8b..a34a44671c8f 100644 --- a/packages/tailwindcss/src/utils/infer-data-type.ts +++ b/packages/tailwindcss/src/utils/infer-data-type.ts @@ -208,7 +208,13 @@ const LENGTH_UNITS = [ 'em', 'ex', 'ch', + 'cap', + 'ic', 'rem', + 'rex', + 'rch', + 'rcap', + 'ric', 'lh', 'rlh', 'vw', @@ -219,10 +225,22 @@ const LENGTH_UNITS = [ 'vi', 'svw', 'svh', + 'svi', + 'svb', + 'svmin', + 'svmax', 'lvw', 'lvh', + 'lvi', + 'lvb', + 'lvmin', + 'lvmax', 'dvw', 'dvh', + 'dvi', + 'dvb', + 'dvmin', + 'dvmax', 'cqw', 'cqh', 'cqi', From 8e248d1de23f7a4afff48a2cfb8a80e29ed00f0f Mon Sep 17 00:00:00 2001 From: kwy404 Date: Fri, 25 Sep 2026 17:37:17 -0300 Subject: [PATCH 2/4] Update changelog entry with PR number --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b96acfad69b..70b66ab67d1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512)) - Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508)) - Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513)) -- Treat viewport units like `dvmin` and `svi` and font-relative units like `cap` and `rex` as lengths in arbitrary values (e.g. `text-[10dvmin]` generates `font-size` instead of `color`) ([#XXXXX](https://github.com/tailwindlabs/tailwindcss/pull/XXXXX)) +- Treat viewport units like `dvmin` and `svi` and font-relative units like `cap` and `rex` as lengths in arbitrary values (e.g. `text-[10dvmin]` generates `font-size` instead of `color`) ([#20516](https://github.com/tailwindlabs/tailwindcss/pull/20516)) ## [4.3.3] - 2026-07-16 From 704d918d30a2ba3a11ff1780e6329186dd51f97f Mon Sep 17 00:00:00 2001 From: kwy404 Date: Sat, 26 Sep 2026 15:46:47 -0300 Subject: [PATCH 3/4] Test every newly recognized length unit --- packages/tailwindcss/src/utilities.test.ts | 45 ++++++++++++---------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index ccc6ebbdeec8..e15c77436fe4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26918,26 +26918,31 @@ test('text', async () => { }) test('text with viewport and font-relative length units', async () => { - expect(await run(['text-[1cap]', 'text-[1rex]', 'text-[1svi]', 'text-[1dvmin]'])) - .toMatchInlineSnapshot(` - " - .text-\\[1cap\\] { - font-size: 1cap; - } - - .text-\\[1dvmin\\] { - font-size: 1dvmin; - } - - .text-\\[1rex\\] { - font-size: 1rex; - } - - .text-\\[1svi\\] { - font-size: 1svi; - } - " - `) + let units = [ + 'cap', + 'ic', + 'rex', + 'rch', + 'rcap', + 'ric', + 'svi', + 'svb', + 'svmin', + 'svmax', + 'lvi', + 'lvb', + 'lvmin', + 'lvmax', + 'dvi', + 'dvb', + 'dvmin', + 'dvmax', + ] + let css = await run(units.map((unit) => `text-[1${unit}]`)) + + for (let unit of units) { + expect(css).toContain(`font-size: 1${unit};`) + } }) test('text-shadow', async () => { From be6219fbee17458b7d7cc8a301ef09d9c6bc84f6 Mon Sep 17 00:00:00 2001 From: kwy404 Date: Sat, 26 Sep 2026 15:54:35 -0300 Subject: [PATCH 4/4] Check the full generated rule for each length unit --- packages/tailwindcss/src/utilities.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e15c77436fe4..217b57bc11e1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26938,10 +26938,10 @@ test('text with viewport and font-relative length units', async () => { 'dvmin', 'dvmax', ] - let css = await run(units.map((unit) => `text-[1${unit}]`)) - for (let unit of units) { - expect(css).toContain(`font-size: 1${unit};`) + expect(await run([`text-[1${unit}]`])).toEqual( + `\n.text-\\[1${unit}\\] {\n font-size: 1${unit};\n}\n`, + ) } })