Skip to content

Commit d52c94f

Browse files
adamwathanclaude
andauthored
Simplify logical sizing utility theme namespaces (tailwindlabs#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>
1 parent d8b00d1 commit d52c94f

2 files changed

Lines changed: 9 additions & 9 deletions

File tree

packages/tailwindcss/src/utilities.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3842,7 +3842,7 @@ test('inline-size', async () => {
38423842
css`
38433843
@theme {
38443844
--spacing-4: 1rem;
3845-
--width-xl: 36rem;
3845+
--container-xl: 36rem;
38463846
}
38473847
@tailwind utilities;
38483848
`,
@@ -3865,7 +3865,7 @@ test('inline-size', async () => {
38653865
).toMatchInlineSnapshot(`
38663866
":root, :host {
38673867
--spacing-4: 1rem;
3868-
--width-xl: 36rem;
3868+
--container-xl: 36rem;
38693869
}
38703870

38713871
.inline-1\\/2 {
@@ -3917,7 +3917,7 @@ test('inline-size', async () => {
39173917
}
39183918

39193919
.inline-xl {
3920-
inline-size: var(--width-xl);
3920+
inline-size: var(--container-xl);
39213921
}"
39223922
`)
39233923
expect(

packages/tailwindcss/src/utilities.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1135,12 +1135,12 @@ export function createUtilities(theme: Theme) {
11351135
staticUtility(`max-block-none`, [['max-block-size', 'none']])
11361136

11371137
for (let [name, namespaces, property] of [
1138-
['inline', ['--width', '--spacing', '--container'], 'inline-size'],
1139-
['min-inline', ['--min-width', '--spacing', '--container'], 'min-inline-size'],
1140-
['max-inline', ['--max-width', '--spacing', '--container'], 'max-inline-size'],
1141-
['block', ['--height', '--spacing'], 'block-size'],
1142-
['min-block', ['--min-height', '--height', '--spacing'], 'min-block-size'],
1143-
['max-block', ['--max-height', '--height', '--spacing'], 'max-block-size'],
1138+
['inline', ['--spacing', '--container'], 'inline-size'],
1139+
['min-inline', ['--spacing', '--container'], 'min-inline-size'],
1140+
['max-inline', ['--spacing', '--container'], 'max-inline-size'],
1141+
['block', ['--spacing'], 'block-size'],
1142+
['min-block', ['--spacing'], 'min-block-size'],
1143+
['max-block', ['--spacing'], 'max-block-size'],
11441144
] as [string, ThemeKey[], string][]) {
11451145
spacingUtility(name, namespaces, (value) => [decl(property, value)], {
11461146
supportsFractions: true,

0 commit comments

Comments
 (0)