From d52c94ff5faf4ab3b5a3caf878d22ff1b84e6c07 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 30 Jan 2026 16:40:51 +0100
Subject: [PATCH] Simplify logical sizing utility theme namespaces (#19625)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/tailwindcss/src/utilities.test.ts |  6 +++---
 packages/tailwindcss/src/utilities.ts      | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index ea60feeae..f68601358 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -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(
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 4f54c9584..66ae59230 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -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,