From 13f11069c80a54cae38bc3368a545ca93e45aead Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:24:37 -0500
Subject: [PATCH] Add radius utilities and deprecated rounded utilities

---
 .../src/__snapshots__/index.test.ts.snap      |   8 -
 .../src/__snapshots__/index.test.ts.snap      |   8 -
 .../__snapshots__/intellisense.test.ts.snap   | 540 ++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         |  35 +-
 packages/tailwindcss/theme.css                |  24 +-
 playgrounds/vite/src/app.tsx                  |   3 +
 6 files changed, 590 insertions(+), 28 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 24d0c8fa484d..81a1ac5608a3 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 760d4a9ec6f5..ccbabeb34d33 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 0b4723c64b7c..f22ec2a0f377 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5051,6 +5051,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 f57c4cccec9d..88c2119e855b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1931,8 +1931,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']],
@@ -1959,10 +1962,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 ba6d9a538c64..965e03bee832 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);
@@ -458,3 +448,17 @@
     }
   }
 }
+
+/**
+ * @deprecated
+ */
+@theme default inline reference {
+  --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 (
     <div className="m-3 p-3 border">
       <h1 className="text-blue-500">Hello World</h1>
+
+      <div className="h-48 w-72 bg-red-500 rounded-none"></div>
+      <div className="h-48 w-72 bg-red-500 radius-4 pt"></div>
     </div>
   )
 }