Add logical sizing utilities (inline-size, block-size)

[adamwathan]

Summary

Adds new utilities for CSS logical properties that provide writing-direction-aware alternatives to width and height:

• inline-* for inline-size (logical equivalent of width)
• min-inline-* for min-inline-size (logical equivalent of min-width)
• max-inline-* for max-inline-size (logical equivalent of max-width)
• block-* for block-size (logical equivalent of height)
• min-block-* for min-block-size (logical equivalent of min-height)
• max-block-* for max-block-size (logical equivalent of max-height)

New Utilities

inline-size utilities

Class	CSS Property
inline-auto	inline-size: auto
inline-full	inline-size: 100%
inline-min	inline-size: min-content
inline-max	inline-size: max-content
inline-fit	inline-size: fit-content
inline-screen	inline-size: 100vw
inline-svw	inline-size: 100svw
inline-lvw	inline-size: 100lvw
inline-dvw	inline-size: 100dvw
inline-{spacing}	inline-size: {value} (e.g., inline-4, inline-px)
inline-{fraction}	inline-size: {percent} (e.g., inline-1/2, inline-3/4)
inline-[{value}]	inline-size: {value} (arbitrary values)

min-inline-size utilities

Class	CSS Property
min-inline-auto	min-inline-size: auto
min-inline-full	min-inline-size: 100%
min-inline-min	min-inline-size: min-content
min-inline-max	min-inline-size: max-content
min-inline-fit	min-inline-size: fit-content
min-inline-screen	min-inline-size: 100vw
min-inline-svw	min-inline-size: 100svw
min-inline-lvw	min-inline-size: 100lvw
min-inline-dvw	min-inline-size: 100dvw
min-inline-{spacing}	min-inline-size: {value}
min-inline-[{value}]	min-inline-size: {value} (arbitrary values)

max-inline-size utilities

Class	CSS Property
max-inline-none	max-inline-size: none
max-inline-full	max-inline-size: 100%
max-inline-min	max-inline-size: min-content
max-inline-max	max-inline-size: max-content
max-inline-fit	max-inline-size: fit-content
max-inline-screen	max-inline-size: 100vw
max-inline-svw	max-inline-size: 100svw
max-inline-lvw	max-inline-size: 100lvw
max-inline-dvw	max-inline-size: 100dvw
max-inline-{spacing}	max-inline-size: {value}
max-inline-[{value}]	max-inline-size: {value} (arbitrary values)

block-size utilities

Class	CSS Property
block-auto	block-size: auto
block-full	block-size: 100%
block-min	block-size: min-content
block-max	block-size: max-content
block-fit	block-size: fit-content
block-screen	block-size: 100vh
block-lh	block-size: 1lh
block-svh	block-size: 100svh
block-lvh	block-size: 100lvh
block-dvh	block-size: 100dvh
block-{spacing}	block-size: {value} (e.g., block-4, block-px)
block-{fraction}	block-size: {percent} (e.g., block-1/2, block-3/4)
block-[{value}]	block-size: {value} (arbitrary values)

min-block-size utilities

Class	CSS Property
min-block-auto	min-block-size: auto
min-block-full	min-block-size: 100%
min-block-min	min-block-size: min-content
min-block-max	min-block-size: max-content
min-block-fit	min-block-size: fit-content
min-block-screen	min-block-size: 100vh
min-block-lh	min-block-size: 1lh
min-block-svh	min-block-size: 100svh
min-block-lvh	min-block-size: 100lvh
min-block-dvh	min-block-size: 100dvh
min-block-{spacing}	min-block-size: {value}
min-block-[{value}]	min-block-size: {value} (arbitrary values)

max-block-size utilities

Class	CSS Property
max-block-none	max-block-size: none
max-block-full	max-block-size: 100%
max-block-min	max-block-size: min-content
max-block-max	max-block-size: max-content
max-block-fit	max-block-size: fit-content
max-block-screen	max-block-size: 100vh
max-block-lh	max-block-size: 1lh
max-block-svh	max-block-size: 100svh
max-block-lvh	max-block-size: 100lvh
max-block-dvh	max-block-size: 100dvh
max-block-{spacing}	max-block-size: {value}
max-block-[{value}]	max-block-size: {value} (arbitrary values)

Test plan

• Added comprehensive unit tests for all new utilities
• Verify utilities work correctly in RTL layouts
• Test with vertical writing modes

[coderabbitai]

Walkthrough

The changes introduce new utility classes for CSS inline-size and block-size properties, plus their min- and max- variants, viewport-unit options (svw, lvw, dvw, svh, lvh, dvh), convenience presets, and integration with spacing utilities. The utilities file registers many new static and spacing-based utilities. Tests were expanded with extensive coverage (555 new lines) validating utility generation, CSS functions, theme variable resolution, arbitrary values, nested variables, ordering, and edge cases.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add logical sizing utilities (inline-size, block-size)' directly and clearly describes the main change: introducing new CSS logical sizing utilities. It is concise, specific, and accurately reflects the primary objective of the changeset.
Description check	✅ Passed	The pull request description is comprehensive and directly related to the changeset, providing detailed documentation of all new utilities, their CSS properties, and test coverage. It clearly explains the purpose and functionality of the additions.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews: finishing_touches: unit_tests: enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/tailwindcss/src/utilities.test.ts`: - Around line 3725-3740: The test block using run(...) contains a duplicated entry 'max-inline-max/foo' and is missing viewport-unit variants; remove the duplicate 'max-inline-max/foo' (only keep one) and add tests for the viewport-unit forms analogous to the existing ones, e.g. include 'max-inline-screen/...', 'max-inline-svw/...', 'max-inline-lvw/...', and 'max-inline-dvw/...' in the array passed to run() so viewport unit behavior for max-inline is covered; keep the surrounding expect(await run(...)).toEqual('') assertion and the existing items unchanged other than these additions/removal. 

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Duplicate test case and missing viewport unit tests.

1. 'max-inline-max/foo' is duplicated on lines 3733-3734.
2. Similar to min-inline-size, this test is missing coverage for viewport units (max-inline-screen, max-inline-svw, max-inline-lvw, max-inline-dvw) if they are implemented.

🛠️ Proposed fix for duplicate

 'max-inline-full/foo', 'max-inline-max/foo', - 'max-inline-max/foo', + 'max-inline-min/foo', 'max-inline-fit/foo',

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	expect(
	await run([
	'max-inline',
	'max-inline-auto',
	'-max-inline-4',
	'-max-inline-[4px]',
	'max-inline-none/foo',
	'max-inline-full/foo',
	'max-inline-max/foo',
	'max-inline-max/foo',
	'max-inline-fit/foo',
	'max-inline-4/foo',
	'max-inline-xl/foo',
	'max-inline-[4px]/foo',
	]),
	).toEqual('')
	expect(
	await run([
	'max-inline',
	'max-inline-auto',
	'-max-inline-4',
	'-max-inline-[4px]',
	'max-inline-none/foo',
	'max-inline-full/foo',
	'max-inline-max/foo',
	'max-inline-min/foo',
	'max-inline-fit/foo',
	'max-inline-4/foo',
	'max-inline-xl/foo',
	'max-inline-[4px]/foo',
	]),
	).toEqual('')

🤖 Prompt for AI Agents

In `@packages/tailwindcss/src/utilities.test.ts` around lines 3725 - 3740, The test block using run(...) contains a duplicated entry 'max-inline-max/foo' and is missing viewport-unit variants; remove the duplicate 'max-inline-max/foo' (only keep one) and add tests for the viewport-unit forms analogous to the existing ones, e.g. include 'max-inline-screen/...', 'max-inline-svw/...', 'max-inline-lvw/...', and 'max-inline-dvw/...' in the array passed to run() so viewport unit behavior for max-inline is covered; keep the surrounding expect(await run(...)).toEqual('') assertion and the existing items unchanged other than these additions/removal. 

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/tailwindcss/src/utilities.test.ts`: - Around line 3785-3794: The test for min-inline-size is missing assertions for viewport-unit variants; update the test array in utilities.test.ts for the 'min-inline-size' case to include the viewport-unit utilities analogous to min-block-size (e.g., add 'min-inline-screen', 'min-inline-svw', 'min-inline-lvw', 'min-inline-dvw'); these utilities are implemented in utilities.ts (see the minInlineSize handling around the code paths at lines ~1101 and ~1126) so just append those four entries to the expected list in the existing test case. - Line 3861: The max-inline-size test is missing coverage for min-content and inline-axis viewport units; update the array of expected utilities (the list that currently includes 'max-inline-none', 'max-inline-full', etc.) to also include 'max-inline-min' (for min-content), 'max-inline-screen', and the inline viewport unit variants 'max-inline-svw', 'max-inline-lvw', and 'max-inline-dvw' so the max-inline-size test matches the parity of max-block-size's equivalents. 

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # First, let's check the utilities.ts file for min-inline and min-block implementations echo "=== Checking min-inline and min-block viewport utilities in utilities.ts ===" rg -n 'min-inline.*(screen|svw|lvw|dvw)' packages/tailwindcss/src/utilities.ts echo -e "\n=== Pattern differences between min-inline and min-block implementations ===" rg -nA 10 "'min-inline-size'" packages/tailwindcss/src/utilities.ts echo -e "\n=== Pattern for min-block-size ===" rg -nA 10 "'min-block-size'" packages/tailwindcss/src/utilities.ts

Repository: tailwindlabs/tailwindcss

Length of output: 5388

---

🏁 Script executed:

#!/bin/bash # Check the test file at the specified lines for min-inline-size test echo "=== Test for min-inline-size around line 3775-3849 ===" sed -n '3775,3849p' packages/tailwindcss/src/utilities.test.ts echo -e "\n=== Test for min-block-size around line 4035-4038 ===" sed -n '4030,4050p' packages/tailwindcss/src/utilities.test.ts

Repository: tailwindlabs/tailwindcss

Length of output: 2041

---

Add missing viewport unit tests for min-inline-size.

The min-inline-size test lacks coverage for viewport units (min-inline-screen, min-inline-svw, min-inline-lvw, min-inline-dvw), while min-block-size (lines ~4035-4048) includes equivalent tests (min-block-screen, min-block-svh, min-block-lvh, min-block-dvh). These utilities are implemented in utilities.ts (lines 1101, 1126) and supported; only the test coverage is missing.

Add these viewport unit utilities to the test case for consistency with min-block-size.

🤖 Prompt for AI Agents

In `@packages/tailwindcss/src/utilities.test.ts` around lines 3785 - 3794, The test for min-inline-size is missing assertions for viewport-unit variants; update the test array in utilities.test.ts for the 'min-inline-size' case to include the viewport-unit utilities analogous to min-block-size (e.g., add 'min-inline-screen', 'min-inline-svw', 'min-inline-lvw', 'min-inline-dvw'); these utilities are implemented in utilities.ts (see the minInlineSize handling around the code paths at lines ~1101 and ~1126) so just append those four entries to the expected list in the existing test case. 

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Check if max-inline viewport utilities are implemented rg -n 'max-inline.*(screen|svw|lvw|dvw|min)' packages/tailwindcss/src/utilities.ts echo "---" # Also check what max-inline utilities exist rg -n '"max-inline' packages/tailwindcss/src/utilities.ts | head -20

Repository: tailwindlabs/tailwindcss

Length of output: 145

---

🏁 Script executed:

#!/bin/bash # Check the test file at the line in question cat -n packages/tailwindcss/src/utilities.test.ts | sed -n '3850,3875p'

Repository: tailwindlabs/tailwindcss

Length of output: 839

---

🏁 Script executed:

#!/bin/bash # Check the max-block test to see what it includes cat -n packages/tailwindcss/src/utilities.test.ts | sed -n '4130,4145p'

Repository: tailwindlabs/tailwindcss

Length of output: 535

---

🏁 Script executed:

#!/bin/bash # Search for max-inline implementations in utilities.ts rg -n 'max-inline' packages/tailwindcss/src/utilities.ts | head -30

Repository: tailwindlabs/tailwindcss

Length of output: 482

---

🏁 Script executed:

#!/bin/bash # Search for all max-inline viewport unit variants rg -n 'max-inline-(screen|svw|lvw|dvw|min)' packages/tailwindcss/src/utilities.ts

Repository: tailwindlabs/tailwindcss

Length of output: 141

---

🏁 Script executed:

#!/bin/bash # Look at the full max-inline implementation section in utilities.ts cat -n packages/tailwindcss/src/utilities.ts | sed -n '1070,1145p'

Repository: tailwindlabs/tailwindcss

Length of output: 3614

---

🏁 Script executed:

#!/bin/bash # Check if there's any mention of svw/lvw/dvw at all (these might be width-based variants) rg -n '(svw|lvw|dvw)' packages/tailwindcss/src/utilities.ts | head -20

Repository: tailwindlabs/tailwindcss

Length of output: 235

---

Add missing viewport units and min-content coverage to max-inline-size test.

The max-inline-size test is missing coverage for utilities that are implemented in the codebase:

1. max-inline-min (for min-content)
2. max-inline-screen
3. max-inline-svw, max-inline-lvw, max-inline-dvw (inline-axis viewport units)

The max-block-size test (lines 4130-4143) includes these equivalents (max-block-min, max-block-screen, max-block-svh/lvh/dvh), so max-inline-size should have parity.

🤖 Prompt for AI Agents

In `@packages/tailwindcss/src/utilities.test.ts` at line 3861, The max-inline-size test is missing coverage for min-content and inline-axis viewport units; update the array of expected utilities (the list that currently includes 'max-inline-none', 'max-inline-full', etc.) to also include 'max-inline-min' (for min-content), 'max-inline-screen', and the inline viewport unit variants 'max-inline-svw', 'max-inline-lvw', and 'max-inline-dvw' so the max-inline-size test matches the parity of max-block-size's equivalents.