Simplify logical sizing utility theme namespaces (#19625)

Update inline-size and block-size utilities to only read from --spacing
and --container theme keys, removing backwards-compat references to
--width, --height, --min-width, --min-height, --max-width, and
--max-height.

Since these are new utilities with no backwards compatibility concerns,
the simpler approach is preferred:
- inline/min-inline/max-inline: --spacing, --container
- block/min-block/max-block: --spacing only

https://claude.ai/code/session_01WhrjmutxsLP753VUtFy24S

<!--

👋 Hey, thanks for your interest in contributing to Tailwind!

**Please ask first before starting work on any significant new
features.**

It's never a fun experience to have your pull request declined after
investing a lot of time and effort into a new feature. To avoid this
from happening, we request that contributors create a discussion to
first discuss any significant new features.

For more info, check out the contributing guide:


https://github.com/tailwindcss/tailwindcss/blob/main/.github/CONTRIBUTING.md

-->

## Summary

<!--

Provide a summary of the issue and the changes you're making. How does
your change solve the problem?

-->

## Test plan

<!--

Explain how you tested your changes. Include the exact commands that you
used to verify the change works and include screenshots/screen
recordings of the update behavior in the browser if applicable.

-->

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Adam Wathan 2026-01-30 16:40:51 +01:00 • committed by GitHub
parent d8b00d1114
commit d52c94ff5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 9 deletions

View file

@ -3842,7 +3842,7 @@ test('inline-size', async () => {
css`
@theme {
--spacing-4: 1rem;
--width-xl: 36rem;
--container-xl: 36rem;
}
@tailwind utilities;
`,
@ -3865,7 +3865,7 @@ test('inline-size', async () => {
).toMatchInlineSnapshot(`
":root, :host {
--spacing-4: 1rem;
--width-xl: 36rem;
--container-xl: 36rem;
}
.inline-1\\/2 {
@ -3917,7 +3917,7 @@ test('inline-size', async () => {
}
.inline-xl {
inline-size: var(--width-xl);
inline-size: var(--container-xl);
}"
`)
expect(

View file

@ -1135,12 +1135,12 @@ export function createUtilities(theme: Theme) {
staticUtility(`max-block-none`, [['max-block-size', 'none']])
for (let [name, namespaces, property] of [
['inline', ['--width', '--spacing', '--container'], 'inline-size'],
['min-inline', ['--min-width', '--spacing', '--container'], 'min-inline-size'],
['max-inline', ['--max-width', '--spacing', '--container'], 'max-inline-size'],
['block', ['--height', '--spacing'], 'block-size'],
['min-block', ['--min-height', '--height', '--spacing'], 'min-block-size'],
['max-block', ['--max-height', '--height', '--spacing'], 'max-block-size'],
['inline', ['--spacing', '--container'], 'inline-size'],
['min-inline', ['--spacing', '--container'], 'min-inline-size'],
['max-inline', ['--spacing', '--container'], 'max-inline-size'],
['block', ['--spacing'], 'block-size'],
['min-block', ['--spacing'], 'min-block-size'],
['max-block', ['--spacing'], 'max-block-size'],
] as [string, ThemeKey[], string][]) {
spacingUtility(name, namespaces, (value) => [decl(property, value)], {
supportsFractions: true,