diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 79934c8c044d..aa930ccc4f58 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9683,6 +9683,25 @@ test('rounded', async () => { border-radius: var(--radius-sm); }" `) + expect( + await compileCss( + css` + @theme { + --radius-full: 99999px; + } + @tailwind utilities; + `, + ['rounded-full'], + ), + ).toMatchInlineSnapshot(` + ":root, :host { + --radius-full: 99999px; + } + + .rounded-full { + border-radius: var(--radius-full); + }" + `) expect( await run([ '-rounded', @@ -9858,15 +9877,11 @@ test('rounded-t', async () => { } .rounded-t-full { - border-top-left-radius: 3.40282e38px; - border-top-right-radius: 3.40282e38px; border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); } .rounded-t-none { - border-top-left-radius: 0; - border-top-right-radius: 0; border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); } @@ -9925,15 +9940,11 @@ test('rounded-r', async () => { } .rounded-r-full { - border-top-right-radius: 3.40282e38px; - border-bottom-right-radius: 3.40282e38px; border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); } .rounded-r-none { - border-top-right-radius: 0; - border-bottom-right-radius: 0; border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); } @@ -9992,15 +10003,11 @@ test('rounded-b', async () => { } .rounded-b-full { - border-bottom-right-radius: 3.40282e38px; - border-bottom-left-radius: 3.40282e38px; border-bottom-right-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } .rounded-b-none { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } @@ -10059,15 +10066,11 @@ test('rounded-l', async () => { } .rounded-l-full { - border-top-left-radius: 3.40282e38px; - border-bottom-left-radius: 3.40282e38px; border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } .rounded-l-none { - border-top-left-radius: 0; - border-bottom-left-radius: 0; border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } @@ -10356,12 +10359,10 @@ test('rounded-tl', async () => { } .rounded-tl-full { - border-top-left-radius: 3.40282e38px; border-top-left-radius: var(--radius-full); } .rounded-tl-none { - border-top-left-radius: 0; border-top-left-radius: var(--radius-none); } @@ -10416,12 +10417,10 @@ test('rounded-tr', async () => { } .rounded-tr-full { - border-top-right-radius: 3.40282e38px; border-top-right-radius: var(--radius-full); } .rounded-tr-none { - border-top-right-radius: 0; border-top-right-radius: var(--radius-none); } @@ -10476,12 +10475,10 @@ test('rounded-br', async () => { } .rounded-br-full { - border-bottom-right-radius: 3.40282e38px; border-bottom-right-radius: var(--radius-full); } .rounded-br-none { - border-bottom-right-radius: 0; border-bottom-right-radius: var(--radius-none); } @@ -10536,12 +10533,10 @@ test('rounded-bl', async () => { } .rounded-bl-full { - border-bottom-left-radius: 3.40282e38px; border-bottom-left-radius: var(--radius-full); } .rounded-bl-none { - border-bottom-left-radius: 0; border-bottom-left-radius: var(--radius-none); } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9a671a41d106..81fb5c8e5a07 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -371,6 +371,7 @@ export function createUtilities(theme: Theme) { supportsFractions?: boolean themeKeys?: ThemeKey[] defaultValue?: string | null + fallbacks?: Record handleBareValue?: (value: NamedUtilityValue) => string | null handleNegativeBareValue?: (value: NamedUtilityValue) => string | null handle: (value: string, dataType: string | null) => AstNode[] | undefined @@ -427,6 +428,14 @@ export function createUtilities(theme: Theme) { value = desc.handleBareValue(candidate.value) if (!value?.includes('/') && candidate.modifier) return } + + if (value === null && desc.fallbacks) { + let fallback = desc.fallbacks[candidate.value.value] + if (fallback) { + if (candidate.modifier) return + return fallback + } + } } // If there is no value, don't generate any rules. @@ -2119,17 +2128,13 @@ export function createUtilities(theme: Theme) { ['rounded-br', ['border-bottom-right-radius']], ['rounded-bl', ['border-bottom-left-radius']], ] as const) { - staticUtility( - `${root}-none`, - properties.map((property) => [property, '0']), - ) - staticUtility( - `${root}-full`, - properties.map((property) => [property, 'calc(infinity * 1px)']), - ) functionalUtility(root, { themeKeys: ['--radius'], handle: (value) => properties.map((property) => decl(property, value)), + fallbacks: { + none: properties.map((property) => decl(property, '0')), + full: properties.map((property) => decl(property, 'calc(infinity * 1px)')), + }, }) } }