diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 83624ee4fff0..5ebd2b1f9ae5 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -271,14 +271,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 4c4150925a86..115b278ababf 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -270,14 +270,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index ac0a70fa693d..09a74146bd35 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -5053,6 +5053,546 @@ exports[`getClassList 1`] = ` "py-9", "py-96", "py-px", + "radius-0", + "radius-0.5", + "radius-1", + "radius-1.5", + "radius-10", + "radius-11", + "radius-12", + "radius-14", + "radius-16", + "radius-2", + "radius-2.5", + "radius-20", + "radius-24", + "radius-28", + "radius-3", + "radius-3.5", + "radius-32", + "radius-36", + "radius-4", + "radius-40", + "radius-44", + "radius-48", + "radius-5", + "radius-52", + "radius-56", + "radius-6", + "radius-60", + "radius-64", + "radius-7", + "radius-72", + "radius-8", + "radius-80", + "radius-9", + "radius-96", + "radius-b-0", + "radius-b-0.5", + "radius-b-1", + "radius-b-1.5", + "radius-b-10", + "radius-b-11", + "radius-b-12", + "radius-b-14", + "radius-b-16", + "radius-b-2", + "radius-b-2.5", + "radius-b-20", + "radius-b-24", + "radius-b-28", + "radius-b-3", + "radius-b-3.5", + "radius-b-32", + "radius-b-36", + "radius-b-4", + "radius-b-40", + "radius-b-44", + "radius-b-48", + "radius-b-5", + "radius-b-52", + "radius-b-56", + "radius-b-6", + "radius-b-60", + "radius-b-64", + "radius-b-7", + "radius-b-72", + "radius-b-8", + "radius-b-80", + "radius-b-9", + "radius-b-96", + "radius-b-full", + "radius-b-px", + "radius-bl-0", + "radius-bl-0.5", + "radius-bl-1", + "radius-bl-1.5", + "radius-bl-10", + "radius-bl-11", + "radius-bl-12", + "radius-bl-14", + "radius-bl-16", + "radius-bl-2", + "radius-bl-2.5", + "radius-bl-20", + "radius-bl-24", + "radius-bl-28", + "radius-bl-3", + "radius-bl-3.5", + "radius-bl-32", + "radius-bl-36", + "radius-bl-4", + "radius-bl-40", + "radius-bl-44", + "radius-bl-48", + "radius-bl-5", + "radius-bl-52", + "radius-bl-56", + "radius-bl-6", + "radius-bl-60", + "radius-bl-64", + "radius-bl-7", + "radius-bl-72", + "radius-bl-8", + "radius-bl-80", + "radius-bl-9", + "radius-bl-96", + "radius-bl-full", + "radius-bl-px", + "radius-br-0", + "radius-br-0.5", + "radius-br-1", + "radius-br-1.5", + "radius-br-10", + "radius-br-11", + "radius-br-12", + "radius-br-14", + "radius-br-16", + "radius-br-2", + "radius-br-2.5", + "radius-br-20", + "radius-br-24", + "radius-br-28", + "radius-br-3", + "radius-br-3.5", + "radius-br-32", + "radius-br-36", + "radius-br-4", + "radius-br-40", + "radius-br-44", + "radius-br-48", + "radius-br-5", + "radius-br-52", + "radius-br-56", + "radius-br-6", + "radius-br-60", + "radius-br-64", + "radius-br-7", + "radius-br-72", + "radius-br-8", + "radius-br-80", + "radius-br-9", + "radius-br-96", + "radius-br-full", + "radius-br-px", + "radius-e-0", + "radius-e-0.5", + "radius-e-1", + "radius-e-1.5", + "radius-e-10", + "radius-e-11", + "radius-e-12", + "radius-e-14", + "radius-e-16", + "radius-e-2", + "radius-e-2.5", + "radius-e-20", + "radius-e-24", + "radius-e-28", + "radius-e-3", + "radius-e-3.5", + "radius-e-32", + "radius-e-36", + "radius-e-4", + "radius-e-40", + "radius-e-44", + "radius-e-48", + "radius-e-5", + "radius-e-52", + "radius-e-56", + "radius-e-6", + "radius-e-60", + "radius-e-64", + "radius-e-7", + "radius-e-72", + "radius-e-8", + "radius-e-80", + "radius-e-9", + "radius-e-96", + "radius-e-full", + "radius-e-px", + "radius-ee-0", + "radius-ee-0.5", + "radius-ee-1", + "radius-ee-1.5", + "radius-ee-10", + "radius-ee-11", + "radius-ee-12", + "radius-ee-14", + "radius-ee-16", + "radius-ee-2", + "radius-ee-2.5", + "radius-ee-20", + "radius-ee-24", + "radius-ee-28", + "radius-ee-3", + "radius-ee-3.5", + "radius-ee-32", + "radius-ee-36", + "radius-ee-4", + "radius-ee-40", + "radius-ee-44", + "radius-ee-48", + "radius-ee-5", + "radius-ee-52", + "radius-ee-56", + "radius-ee-6", + "radius-ee-60", + "radius-ee-64", + "radius-ee-7", + "radius-ee-72", + "radius-ee-8", + "radius-ee-80", + "radius-ee-9", + "radius-ee-96", + "radius-ee-full", + "radius-ee-px", + "radius-es-0", + "radius-es-0.5", + "radius-es-1", + "radius-es-1.5", + "radius-es-10", + "radius-es-11", + "radius-es-12", + "radius-es-14", + "radius-es-16", + "radius-es-2", + "radius-es-2.5", + "radius-es-20", + "radius-es-24", + "radius-es-28", + "radius-es-3", + "radius-es-3.5", + "radius-es-32", + "radius-es-36", + "radius-es-4", + "radius-es-40", + "radius-es-44", + "radius-es-48", + "radius-es-5", + "radius-es-52", + "radius-es-56", + "radius-es-6", + "radius-es-60", + "radius-es-64", + "radius-es-7", + "radius-es-72", + "radius-es-8", + "radius-es-80", + "radius-es-9", + "radius-es-96", + "radius-es-full", + "radius-es-px", + "radius-full", + "radius-l-0", + "radius-l-0.5", + "radius-l-1", + "radius-l-1.5", + "radius-l-10", + "radius-l-11", + "radius-l-12", + "radius-l-14", + "radius-l-16", + "radius-l-2", + "radius-l-2.5", + "radius-l-20", + "radius-l-24", + "radius-l-28", + "radius-l-3", + "radius-l-3.5", + "radius-l-32", + "radius-l-36", + "radius-l-4", + "radius-l-40", + "radius-l-44", + "radius-l-48", + "radius-l-5", + "radius-l-52", + "radius-l-56", + "radius-l-6", + "radius-l-60", + "radius-l-64", + "radius-l-7", + "radius-l-72", + "radius-l-8", + "radius-l-80", + "radius-l-9", + "radius-l-96", + "radius-l-full", + "radius-l-px", + "radius-px", + "radius-r-0", + "radius-r-0.5", + "radius-r-1", + "radius-r-1.5", + "radius-r-10", + "radius-r-11", + "radius-r-12", + "radius-r-14", + "radius-r-16", + "radius-r-2", + "radius-r-2.5", + "radius-r-20", + "radius-r-24", + "radius-r-28", + "radius-r-3", + "radius-r-3.5", + "radius-r-32", + "radius-r-36", + "radius-r-4", + "radius-r-40", + "radius-r-44", + "radius-r-48", + "radius-r-5", + "radius-r-52", + "radius-r-56", + "radius-r-6", + "radius-r-60", + "radius-r-64", + "radius-r-7", + "radius-r-72", + "radius-r-8", + "radius-r-80", + "radius-r-9", + "radius-r-96", + "radius-r-full", + "radius-r-px", + "radius-s-0", + "radius-s-0.5", + "radius-s-1", + "radius-s-1.5", + "radius-s-10", + "radius-s-11", + "radius-s-12", + "radius-s-14", + "radius-s-16", + "radius-s-2", + "radius-s-2.5", + "radius-s-20", + "radius-s-24", + "radius-s-28", + "radius-s-3", + "radius-s-3.5", + "radius-s-32", + "radius-s-36", + "radius-s-4", + "radius-s-40", + "radius-s-44", + "radius-s-48", + "radius-s-5", + "radius-s-52", + "radius-s-56", + "radius-s-6", + "radius-s-60", + "radius-s-64", + "radius-s-7", + "radius-s-72", + "radius-s-8", + "radius-s-80", + "radius-s-9", + "radius-s-96", + "radius-s-full", + "radius-s-px", + "radius-se-0", + "radius-se-0.5", + "radius-se-1", + "radius-se-1.5", + "radius-se-10", + "radius-se-11", + "radius-se-12", + "radius-se-14", + "radius-se-16", + "radius-se-2", + "radius-se-2.5", + "radius-se-20", + "radius-se-24", + "radius-se-28", + "radius-se-3", + "radius-se-3.5", + "radius-se-32", + "radius-se-36", + "radius-se-4", + "radius-se-40", + "radius-se-44", + "radius-se-48", + "radius-se-5", + "radius-se-52", + "radius-se-56", + "radius-se-6", + "radius-se-60", + "radius-se-64", + "radius-se-7", + "radius-se-72", + "radius-se-8", + "radius-se-80", + "radius-se-9", + "radius-se-96", + "radius-se-full", + "radius-se-px", + "radius-ss-0", + "radius-ss-0.5", + "radius-ss-1", + "radius-ss-1.5", + "radius-ss-10", + "radius-ss-11", + "radius-ss-12", + "radius-ss-14", + "radius-ss-16", + "radius-ss-2", + "radius-ss-2.5", + "radius-ss-20", + "radius-ss-24", + "radius-ss-28", + "radius-ss-3", + "radius-ss-3.5", + "radius-ss-32", + "radius-ss-36", + "radius-ss-4", + "radius-ss-40", + "radius-ss-44", + "radius-ss-48", + "radius-ss-5", + "radius-ss-52", + "radius-ss-56", + "radius-ss-6", + "radius-ss-60", + "radius-ss-64", + "radius-ss-7", + "radius-ss-72", + "radius-ss-8", + "radius-ss-80", + "radius-ss-9", + "radius-ss-96", + "radius-ss-full", + "radius-ss-px", + "radius-t-0", + "radius-t-0.5", + "radius-t-1", + "radius-t-1.5", + "radius-t-10", + "radius-t-11", + "radius-t-12", + "radius-t-14", + "radius-t-16", + "radius-t-2", + "radius-t-2.5", + "radius-t-20", + "radius-t-24", + "radius-t-28", + "radius-t-3", + "radius-t-3.5", + "radius-t-32", + "radius-t-36", + "radius-t-4", + "radius-t-40", + "radius-t-44", + "radius-t-48", + "radius-t-5", + "radius-t-52", + "radius-t-56", + "radius-t-6", + "radius-t-60", + "radius-t-64", + "radius-t-7", + "radius-t-72", + "radius-t-8", + "radius-t-80", + "radius-t-9", + "radius-t-96", + "radius-t-full", + "radius-t-px", + "radius-tl-0", + "radius-tl-0.5", + "radius-tl-1", + "radius-tl-1.5", + "radius-tl-10", + "radius-tl-11", + "radius-tl-12", + "radius-tl-14", + "radius-tl-16", + "radius-tl-2", + "radius-tl-2.5", + "radius-tl-20", + "radius-tl-24", + "radius-tl-28", + "radius-tl-3", + "radius-tl-3.5", + "radius-tl-32", + "radius-tl-36", + "radius-tl-4", + "radius-tl-40", + "radius-tl-44", + "radius-tl-48", + "radius-tl-5", + "radius-tl-52", + "radius-tl-56", + "radius-tl-6", + "radius-tl-60", + "radius-tl-64", + "radius-tl-7", + "radius-tl-72", + "radius-tl-8", + "radius-tl-80", + "radius-tl-9", + "radius-tl-96", + "radius-tl-full", + "radius-tl-px", + "radius-tr-0", + "radius-tr-0.5", + "radius-tr-1", + "radius-tr-1.5", + "radius-tr-10", + "radius-tr-11", + "radius-tr-12", + "radius-tr-14", + "radius-tr-16", + "radius-tr-2", + "radius-tr-2.5", + "radius-tr-20", + "radius-tr-24", + "radius-tr-28", + "radius-tr-3", + "radius-tr-3.5", + "radius-tr-32", + "radius-tr-36", + "radius-tr-4", + "radius-tr-40", + "radius-tr-44", + "radius-tr-48", + "radius-tr-5", + "radius-tr-52", + "radius-tr-56", + "radius-tr-6", + "radius-tr-60", + "radius-tr-64", + "radius-tr-7", + "radius-tr-72", + "radius-tr-8", + "radius-tr-80", + "radius-tr-9", + "radius-tr-96", + "radius-tr-full", + "radius-tr-px", "relative", "resize", "resize-none", diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2248f507deee..877f6df08eb6 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1928,8 +1928,11 @@ export function createUtilities(theme: Theme) { staticUtility('break-all', [['word-break', 'break-all']]) staticUtility('break-keep', [['word-break', 'break-keep']]) + /** + * @css `border-radius` + */ { - // border-radius + // Deprecated: `rounded` utilities for (let [root, properties] of [ ['rounded', ['border-radius']], ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']], @@ -1956,10 +1959,38 @@ export function createUtilities(theme: Theme) { properties.map((property) => [property, 'calc(infinity * 1px)']), ) functionalUtility(root, { - themeKeys: ['--radius'], + themeKeys: ['--radius', '--rounded'], handle: (value) => properties.map((property) => decl(property, value)), }) } + + // `radius-*` utilities + for (let [root, properties] of [ + ['radius', ['border-radius']], + ['radius-s', ['border-start-start-radius', 'border-end-start-radius']], + ['radius-e', ['border-start-end-radius', 'border-end-end-radius']], + ['radius-t', ['border-top-left-radius', 'border-top-right-radius']], + ['radius-r', ['border-top-right-radius', 'border-bottom-right-radius']], + ['radius-b', ['border-bottom-right-radius', 'border-bottom-left-radius']], + ['radius-l', ['border-top-left-radius', 'border-bottom-left-radius']], + ['radius-ss', ['border-start-start-radius']], + ['radius-se', ['border-start-end-radius']], + ['radius-ee', ['border-end-end-radius']], + ['radius-es', ['border-end-start-radius']], + ['radius-tl', ['border-top-left-radius']], + ['radius-tr', ['border-top-right-radius']], + ['radius-br', ['border-bottom-right-radius']], + ['radius-bl', ['border-bottom-left-radius']], + ] as const) { + staticUtility( + `${root}-full`, + properties.map((property) => [property, 'calc(infinity * 1px)']), + ) + + spacingUtility(root, '--radius', (value) => + properties.map((property) => decl(property, value)), + ) + } } staticUtility('border-solid', [ diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 842d172b42fa..c2d04b201979 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -299,16 +299,6 @@ --blur-2xl: 40px; --blur-3xl: 64px; - /* Radii */ - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - /* Shadows */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); @@ -457,11 +447,17 @@ } } -/* Deprecated */ @theme default inline reference { --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); - --radius: 0.25rem; + --rounded: 0.25rem; + --rounded-sm: 0.125rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-4xl: 2rem; } diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx index 8ec50298951f..8f41e3da7255 100644 --- a/playgrounds/vite/src/app.tsx +++ b/playgrounds/vite/src/app.tsx @@ -2,6 +2,9 @@ export function App() { return (

Hello World

+ +
+
) }