Recognize missing viewport and font-relative length units

[kwy404]

Summary

isLength in packages/tailwindcss/src/utils/infer-data-type.ts checks arbitrary values against a fixed list of units. That list was carried over from v3 and is missing several CSS length units: the small, large, and dynamic viewport units svi, svb, svmin, svmax, lvi, lvb, lvmin, lvmax, dvi, dvb, dvmin, dvmax, and the font-relative units cap, ic, rex, rch, rcap, ric.

Because these values are not detected as lengths, utilities that choose a property based on the value type fall back to the color branch. For example text-[10dvmin] generates color: 10dvmin instead of font-size: 10dvmin (while text-[10dvw] already works), and border-[1dvmin] generates border-color: 1dvmin. Today the only workaround is an explicit type hint like text-[length:10dvmin].

This adds the missing units, all of which are <length> units defined in CSS Values and Units Level 4, to the list. Values that were already detected are unaffected.

Test plan

• Added a test to packages/tailwindcss/src/utilities.test.ts covering one unit from each group (cap, rex, svi, dvmin). It fails without the change (the rules are emitted as color: 1<unit>) and passes with it.
• vitest run src/utilities.test.ts -t "viewport and font-relative" (in packages/tailwindcss)
• vitest run (in packages/tailwindcss): 42 files, 5016 tests passed
• prettier --check on the changed files

[greptile-apps]

Confidence Score: 5/5

[Medium risk] Adds missing CSS length units to type inference.

The PR appears safe to merge; the remaining concern is non-blocking test coverage.

_{Reviews (2) · Last reviewed commit: "Test every newly recognized length unit"}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 0ba1780f-7778-4aa3-b3de-a84f18d24b32

📥 Commits

Reviewing files that changed from the base of the PR and between 8e248d1 and 704d918.

📒 Files selected for processing (1)

• packages/tailwindcss/src/utilities.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The length-unit set now includes additional font-relative and viewport-relative units, so isLength recognizes them. A test checks that generated CSS includes a matching font-size declaration for each of the 18 units. The Unreleased changelog records the fix.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to 704d9

The change recognizes the documented units as lengths and includes generated-CSS checks for them; no merge-blocking issue is evident.

Architecture Summary

Architecture risk: 🔵 Low · up to 704d9

The change affects 2 systems.

Changed systems: packages/tailwindcss, CHANGELOG.md

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — packages/tailwindcss (library) was modified; 2 changed files map to changed impact.
• observed — CHANGELOG.md (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in CHANGELOG.md: Adds an Unreleased fix entry documenting length classification for viewport-relative and font-relative units in arbitrary values, with text-[10dvmin] as an example.
• observed — Modified behavior in packages/tailwindcss/src/utils/infer-data-type.ts: LENGTH_UNITS adds cap, ic, rex, rch, rcap, and ric, allowing these units to match isLength.
• observed — Modified behavior in packages/tailwindcss/src/utils/infer-data-type.ts: LENGTH_UNITS adds the svi, svb, svmin, and svmax small viewport units, the corresponding lvi, lvb, lvmin, and lvmax large viewport units, and dvi, dvb, dvmin, and dvmax dynamic viewport units.
• observed — Modified behavior in packages/tailwindcss/src/utilities.test.ts: Replaced the four-unit inline CSS snapshot with a list of 18 units and an assertion that generated CSS contains a matching font-size declaration for each.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the missing viewport and font-relative units, the affected behavior, the implementation, and the tests.
Title check	✅ Passed	The title clearly and concisely identifies the main change: recognizing missing viewport and font-relative length units.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}