From e39d1d9a3c898bcf3eafbe06ecada1e979cd8107 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:03:44 -0500
Subject: [PATCH 01/12] Rename `--font-size-*` variables to `--text-*`

---
 .../src/__snapshots__/index.test.ts.snap      | 56 ++++++------
 .../src/__snapshots__/index.test.ts.snap      | 52 +++++------
 packages/tailwindcss/src/index.test.ts        | 91 +++++++++++++++----
 packages/tailwindcss/src/intellisense.test.ts |  4 +-
 packages/tailwindcss/src/theme.ts             | 10 ++
 packages/tailwindcss/src/utilities.test.ts    | 34 ++++---
 packages/tailwindcss/src/utilities.ts         |  4 +-
 packages/tailwindcss/theme.css                | 52 +++++------
 8 files changed, 185 insertions(+), 118 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index f17f1f775b9e..24d0c8fa484d 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -314,32 +314,32 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --font-size-xs: .75rem;
-    --font-size-xs--line-height: 1rem;
-    --font-size-sm: .875rem;
-    --font-size-sm--line-height: 1.25rem;
-    --font-size-base: 1rem;
-    --font-size-base--line-height: 1.5rem;
-    --font-size-lg: 1.125rem;
-    --font-size-lg--line-height: 1.75rem;
-    --font-size-xl: 1.25rem;
-    --font-size-xl--line-height: 1.75rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-2xl--line-height: 2rem;
-    --font-size-3xl: 1.875rem;
-    --font-size-3xl--line-height: 2.25rem;
-    --font-size-4xl: 2.25rem;
-    --font-size-4xl--line-height: 2.5rem;
-    --font-size-5xl: 3rem;
-    --font-size-5xl--line-height: 1;
-    --font-size-6xl: 3.75rem;
-    --font-size-6xl--line-height: 1;
-    --font-size-7xl: 4.5rem;
-    --font-size-7xl--line-height: 1;
-    --font-size-8xl: 6rem;
-    --font-size-8xl--line-height: 1;
-    --font-size-9xl: 8rem;
-    --font-size-9xl--line-height: 1;
+    --text-xs: .75rem;
+    --text-xs--line-height: 1rem;
+    --text-sm: .875rem;
+    --text-sm--line-height: 1.25rem;
+    --text-base: 1rem;
+    --text-base--line-height: 1.5rem;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: 1.75rem;
+    --text-xl: 1.25rem;
+    --text-xl--line-height: 1.75rem;
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: 2rem;
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: 2.25rem;
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: 2.5rem;
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
     --font-weight-thin: 100;
     --font-weight-extralight: 200;
     --font-weight-light: 300;
@@ -551,8 +551,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer utilities {
   .text-2xl {
-    font-size: var(--font-size-2xl);
-    line-height: var(--tw-leading, var(--font-size-2xl--line-height));
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 
   .text-black\\/50 {
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 900ced186e49..760d4a9ec6f5 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -313,32 +313,32 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-size-xs: .75rem;
-  --font-size-xs--line-height: 1rem;
-  --font-size-sm: .875rem;
-  --font-size-sm--line-height: 1.25rem;
-  --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
-  --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
-  --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
-  --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
-  --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
-  --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
-  --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
-  --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
+  --text-xs: .75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: .875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
   --font-weight-light: 300;
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 6a60c11979c6..4e44129cb96c 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -1067,7 +1067,7 @@ describe('Parsing themes values from CSS', () => {
               }
             }
 
-            --font-size-lg: 20px;
+            --text-lg: 20px;
           }
           @tailwind utilities;
         `,
@@ -1077,11 +1077,11 @@ describe('Parsing themes values from CSS', () => {
       ":root {
         --color-red: red;
         --animate-foo: foo 1s infinite;
-        --font-size-lg: 20px;
+        --text-lg: 20px;
       }
 
       .text-lg {
-        font-size: var(--font-size-lg);
+        font-size: var(--text-lg);
       }
 
       .accent-red {
@@ -1103,8 +1103,8 @@ describe('Parsing themes values from CSS', () => {
           @theme {
             --color-red: #f00;
             --color-blue: #00f;
-            --font-size-sm: 13px;
-            --font-size-md: 16px;
+            --text-sm: 13px;
+            --text-md: 16px;
 
             --animate-spin: spin 1s infinite linear;
 
@@ -1116,7 +1116,7 @@ describe('Parsing themes values from CSS', () => {
           }
           @theme {
             --color-*: initial;
-            --font-size-md: initial;
+            --text-md: initial;
             --animate-*: initial;
             --keyframes-*: initial;
           }
@@ -1129,12 +1129,12 @@ describe('Parsing themes values from CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ":root {
-        --font-size-sm: 13px;
+        --text-sm: 13px;
         --color-green: #0f0;
       }
 
       .text-sm {
-        font-size: var(--font-size-sm);
+        font-size: var(--text-sm);
       }
 
       .accent-green {
@@ -1174,13 +1174,12 @@ describe('Parsing themes values from CSS', () => {
     `)
   })
 
-  test('unsetting `--font-*` does not unset `--font-weight-*` or `--font-size-*`', async () => {
+  test('unsetting `--font-*` does not unset `--font-weight-*`', async () => {
     expect(
       await compileCss(
         css`
           @theme {
             --font-weight-bold: bold;
-            --font-size-sm: 14px;
             --font-sans: sans-serif;
             --font-serif: serif;
           }
@@ -1190,12 +1189,11 @@ describe('Parsing themes values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['font-bold', 'text-sm', 'font-sans', 'font-serif', 'font-body'],
+        ['font-bold', 'font-sans', 'font-serif', 'font-body'],
       ),
     ).toMatchInlineSnapshot(`
       ":root {
         --font-weight-bold: bold;
-        --font-size-sm: 14px;
         --font-body: Inter;
       }
 
@@ -1203,10 +1201,6 @@ describe('Parsing themes values from CSS', () => {
         font-family: var(--font-body);
       }
 
-      .text-sm {
-        font-size: var(--font-size-sm);
-      }
-
       .font-bold {
         --tw-font-weight: var(--font-weight-bold);
         font-weight: var(--font-weight-bold);
@@ -1347,6 +1341,71 @@ describe('Parsing themes values from CSS', () => {
     `)
   })
 
+  test('unsetting `--text-*` does not unset `--text-color-*`, `--text-underline-offset-*`, `--text-indent-*`, `--text-decoration-thickness-*` or `--text-decoration-color-*`', async () => {
+    expect(
+      await compileCss(
+        css`
+          @theme {
+            --text-color-potato: brown;
+            --text-underline-offset-potato: 4px;
+            --text-indent-potato: 6px;
+            --text-decoration-thickness-potato: 8px;
+            --text-decoration-color-salad: yellow;
+            --text-4xl: 60px;
+          }
+          @theme {
+            --text-*: initial;
+            --text-lg: 20px;
+          }
+          @tailwind utilities;
+        `,
+        [
+          'text-potato',
+          'underline-offset-potato',
+          'indent-potato',
+          'decoration-potato',
+          'decoration-salad',
+          'text-lg',
+        ],
+      ),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --text-color-potato: brown;
+        --text-underline-offset-potato: 4px;
+        --text-indent-potato: 6px;
+        --text-decoration-thickness-potato: 8px;
+        --text-decoration-color-salad: yellow;
+        --text-lg: 20px;
+      }
+
+      .indent-potato {
+        text-indent: var(--text-indent-potato);
+      }
+
+      .text-lg {
+        font-size: var(--text-lg);
+      }
+
+      .text-potato {
+        color: var(--text-color-potato);
+      }
+
+      .decoration-salad {
+        -webkit-text-decoration-color: var(--text-decoration-color-salad);
+        -webkit-text-decoration-color: var(--text-decoration-color-salad);
+        text-decoration-color: var(--text-decoration-color-salad);
+      }
+
+      .decoration-potato {
+        text-decoration-thickness: var(--text-decoration-thickness-potato);
+      }
+
+      .underline-offset-potato {
+        text-underline-offset: var(--text-underline-offset-potato);
+      }"
+    `)
+  })
+
   test('unused keyframes are removed when an animation is unset', async () => {
     expect(
       await compileCss(
diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts
index 48ec98a5a007..cccf3d4eb14a 100644
--- a/packages/tailwindcss/src/intellisense.test.ts
+++ b/packages/tailwindcss/src/intellisense.test.ts
@@ -11,8 +11,8 @@ function loadDesignSystem() {
   theme.add('--colors-red-500', 'red')
   theme.add('--colors-blue-500', 'blue')
   theme.add('--breakpoint-sm', '640px')
-  theme.add('--font-size-xs', '0.75rem')
-  theme.add('--font-size-xs--line-height', '1rem')
+  theme.add('--text-xs', '0.75rem')
+  theme.add('--text-xs--line-height', '1rem')
   theme.add('--perspective-dramatic', '100px')
   theme.add('--perspective-normal', '500px')
   theme.add('--opacity-background', '0.3')
diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts
index 95f676133808..389b469941f6 100644
--- a/packages/tailwindcss/src/theme.ts
+++ b/packages/tailwindcss/src/theme.ts
@@ -14,6 +14,16 @@ export const enum ThemeOptions {
 const ignoredThemeKeyMap = new Map([
   ['--font', ['--font-weight', '--font-size']],
   ['--inset', ['--inset-shadow', '--inset-ring']],
+  [
+    '--text',
+    [
+      '--text-color',
+      '--text-underline-offset',
+      '--text-indent',
+      '--text-decoration-thickness',
+      '--text-decoration-color',
+    ],
+  ],
 ])
 
 function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 06605b1c0728..5af59338f096 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12368,7 +12368,6 @@ test('font', async () => {
         @theme reference {
           --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
             'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-size-xl: 24px;
           --font-weight-bold: 650;
         }
         @tailwind utilities;
@@ -12381,7 +12380,6 @@ test('font', async () => {
         // font-weight
         '-font-bold',
 
-        'font-size-xl',
         'font-weight-bold',
         'font-sans/foo',
         'font-["arial_rounded"]/foo',
@@ -14663,8 +14661,8 @@ test('text', async () => {
         @theme {
           --color-red-500: #ef4444;
           --line-height-6: 1.5rem;
-          --font-size-sm: 0.875rem;
-          --font-size-sm--line-height: 1.25rem;
+          --text-sm: 0.875rem;
+          --text-sm--line-height: 1.25rem;
           --line-height-9: 2.25rem;
         }
         @tailwind utilities;
@@ -14720,14 +14718,14 @@ test('text', async () => {
     ":root {
       --color-red-500: #ef4444;
       --line-height-6: 1.5rem;
-      --font-size-sm: .875rem;
-      --font-size-sm--line-height: 1.25rem;
+      --text-sm: .875rem;
+      --text-sm--line-height: 1.25rem;
       --line-height-9: 2.25rem;
     }
 
     .text-sm {
-      font-size: var(--font-size-sm);
-      line-height: var(--tw-leading, var(--font-size-sm--line-height));
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
 
     .text-\\[12px\\]\\/6 {
@@ -14756,12 +14754,12 @@ test('text', async () => {
     }
 
     .text-sm\\/6 {
-      font-size: var(--font-size-sm);
+      font-size: var(--text-sm);
       line-height: var(--line-height-6);
     }
 
     .text-sm\\/\\[4px\\] {
-      font-size: var(--font-size-sm);
+      font-size: var(--text-sm);
       line-height: 4px;
     }
 
@@ -16222,13 +16220,13 @@ describe('custom utilities', () => {
       }
 
       @theme reference {
-        --font-size-sm: 0.875rem;
-        --font-size-sm--line-height: 1.25rem;
+        --text-sm: 0.875rem;
+        --text-sm--line-height: 1.25rem;
       }
 
       @utility text-sm {
-        font-size: var(--font-size-sm, 0.8755rem);
-        line-height: var(--font-size-sm--line-height, 1.255rem);
+        font-size: var(--text-sm, 0.8755rem);
+        line-height: var(--text-sm--line-height, 1.255rem);
         text-rendering: optimizeLegibility;
       }
     `)
@@ -16237,10 +16235,10 @@ describe('custom utilities', () => {
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
         .text-sm {
-          font-size: var(--font-size-sm);
-          line-height: var(--tw-leading, var(--font-size-sm--line-height));
-          font-size: var(--font-size-sm, .8755rem);
-          line-height: var(--font-size-sm--line-height, 1.255rem);
+          font-size: var(--text-sm);
+          line-height: var(--tw-leading, var(--text-sm--line-height));
+          font-size: var(--text-sm, .8755rem);
+          line-height: var(--text-sm--line-height, 1.255rem);
           text-rendering: optimizeLegibility;
         }
       }"
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index f6b018fa0a41..321c7a6b8113 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3915,7 +3915,7 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolveWith(
         candidate.value.value,
-        ['--font-size'],
+        ['--text'],
         ['--line-height', '--letter-spacing', '--font-weight'],
       )
       if (value) {
@@ -3967,7 +3967,7 @@ export function createUtilities(theme: Theme) {
     },
     {
       values: [],
-      valueThemeKeys: ['--font-size'],
+      valueThemeKeys: ['--text'],
       modifiers: [],
       modifierThemeKeys: ['--line-height'],
     },
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 47d9ba12ebd7..ba6d9a538c64 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -359,32 +359,32 @@
     'Courier New', monospace;
 
   /* Type scale */
-  --font-size-xs: 0.75rem;
-  --font-size-xs--line-height: 1rem;
-  --font-size-sm: 0.875rem;
-  --font-size-sm--line-height: 1.25rem;
-  --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
-  --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
-  --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
-  --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
-  --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
-  --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
-  --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
-  --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
 
   /* Font weights */
   --font-weight-thin: 100;

From 7b4b556efc9394d209fd85085d4a48253a818b9c Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:34:19 -0500
Subject: [PATCH 02/12] WIP

---
 .../template/codemods/theme-to-var.test.ts    |  4 +-
 .../src/compat/apply-config-to-theme.ts       |  1 +
 .../tailwindcss/src/compat/config.test.ts     | 53 ++++++++++---------
 .../src/compat/config/create-compat-config.ts |  7 +++
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
index 120b446a308c..3dcbaeecac87 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
@@ -10,7 +10,7 @@ test.each([
 
   // Handle special cases around `.1` in the `theme(…)`
   ['[--value:theme(spacing.1)]', '[--value:var(--spacing-1)]'],
-  ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--font-size-xs--line-height)]'],
+  ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
 
   // Convert to `var(…)` if we can resolve the path
   ['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property
@@ -32,7 +32,7 @@ test.each([
   ],
 
   // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
-  ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--font-size-xs)*2)]'],
+  ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
 
   // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
   // - Can't convert to `var(…)` because that would lose the modifier.
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index e9682144afbc..553a1b151caa 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -135,6 +135,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'animation') path[0] = 'animate'
   if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
   if (path[0] === 'fontFamily') path[0] = 'font'
+  if (path[0] === 'fontSize') path[0] = 'text'
   if (path[0] === 'maxWidth') path[0] = 'container'
 
   for (let part of path) {
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index c9f3414f9fd3..817e2e85c94e 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -250,21 +250,21 @@ test('Variants in CSS overwrite variants from plugins', async () => {
 })
 
 describe('theme callbacks', () => {
-  test('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
+  test.only('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
     expect,
   }) => {
     let input = css`
       @theme default {
-        --font-size-base: 0rem;
-        --font-size-base--line-height: 1rem;
-        --font-size-md: 0rem;
-        --font-size-md--line-height: 1rem;
-        --font-size-xl: 0rem;
-        --font-size-xl--line-height: 1rem;
+        --text-base: 0rem;
+        --text-base--line-height: 1rem;
+        --text-md: 0rem;
+        --text-md--line-height: 1rem;
+        --text-xl: 0rem;
+        --text-xl--line-height: 1rem;
       }
       @theme {
-        --font-size-base: 100rem;
-        --font-size-md--line-height: 101rem;
+        --text-base: 100rem;
+        --text-md--line-height: 101rem;
       }
       @tailwind utilities;
       @config "./config.js";
@@ -289,20 +289,23 @@ describe('theme callbacks', () => {
               }),
 
               // Tuple access
-              typography: ({ theme }) => ({
-                '[class~=lead-base]': {
-                  fontSize: theme('fontSize.base')[0],
-                  ...theme('fontSize.base')[1],
-                },
-                '[class~=lead-md]': {
-                  fontSize: theme('fontSize.md')[0],
-                  ...theme('fontSize.md')[1],
-                },
-                '[class~=lead-xl]': {
-                  fontSize: theme('fontSize.xl')[0],
-                  ...theme('fontSize.xl')[1],
-                },
-              }),
+              typography: ({ theme }) => {
+                console.log(theme('fontSize'))
+                return {
+                  '[class~=lead-base]': {
+                    fontSize: theme('fontSize.base')[0],
+                    ...theme('fontSize.base')[1],
+                  },
+                  '[class~=lead-md]': {
+                    fontSize: theme('fontSize.md')[0],
+                    ...theme('fontSize.md')[1],
+                  },
+                  '[class~=lead-xl]': {
+                    fontSize: theme('fontSize.xl')[0],
+                    ...theme('fontSize.xl')[1],
+                  },
+                }
+              },
             },
           },
 
@@ -323,8 +326,8 @@ describe('theme callbacks', () => {
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
         ":root {
-          --font-size-base: 100rem;
-          --font-size-md--line-height: 101rem;
+          --text-base: 100rem;
+          --text-md--line-height: 101rem;
         }
         .prose {
           [class~=lead-base] {
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts
index e141d6ed9357..f3c6d235e386 100644
--- a/packages/tailwindcss/src/compat/config/create-compat-config.ts
+++ b/packages/tailwindcss/src/compat/config/create-compat-config.ts
@@ -14,6 +14,13 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
       colors: ({ theme }) => theme('color', {}),
 
       extend: {
+        fontSize: ({ theme }) => {
+          console.log(theme('text', {}))
+          return {
+            ...theme('text', {}),
+          }
+        },
+
         boxShadow: ({ theme }) => ({
           ...theme('shadow', {}),
         }),

From c98a41418dff2ea6d034d1d1ac94f47b316ef389 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 7 Nov 2024 18:40:02 +0100
Subject: [PATCH 03/12] WIP

---
 .../src/compat/apply-compat-hooks.ts          | 11 +++----
 .../src/compat/apply-config-to-theme.test.ts  |  6 ++--
 .../src/compat/apply-config-to-theme.ts       |  2 ++
 .../tailwindcss/src/compat/config.test.ts     |  5 +--
 .../src/compat/flatten-color-palette.test.ts  | 32 +++++++++++++++++++
 .../src/compat/flatten-color-palette.ts       | 11 +++++++
 .../tailwindcss/src/compat/plugin-api.test.ts |  4 +--
 .../src/compat/plugin-functions.ts            | 19 ++---------
 .../tailwindcss/src/css-functions.test.ts     |  8 ++---
 9 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 packages/tailwindcss/src/compat/flatten-color-palette.test.ts

diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index c4cfec81cb06..8fe6663a9b0a 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -225,12 +225,6 @@ function upgradeToFullPluginSupport({
     userConfig,
   )
 
-  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
-
-  for (let { handler } of resolvedConfig.plugins) {
-    handler(pluginApi)
-  }
-
   // Merge the user-configured theme keys into the design system. The compat
   // config would otherwise expand into namespaces like `background-color` which
   // core utilities already read from.
@@ -240,6 +234,11 @@ function upgradeToFullPluginSupport({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
 
+  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
+  for (let { handler } of resolvedConfig.plugins) {
+    handler(pluginApi)
+  }
+
   // If a prefix has already been set in CSS don't override it
   if (!designSystem.theme.prefix && resolvedConfig.prefix) {
     if (resolvedConfig.prefix.endsWith('-')) {
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
index f427f996392c..9a44a1719d06 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -82,9 +82,9 @@ test('config values can be merged into the theme', () => {
     'Potato Mono',
     { '--font-variation-settings': '"XHGT" 0.7' },
   ])
-  expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
-  expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
-  expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([
+  expect(theme.resolve('sm', ['--text'])).toEqual('0.875rem')
+  expect(theme.resolve('base', ['--text'])).toEqual('1rem')
+  expect(theme.resolveWith('base', ['--text'], ['--line-height'])).toEqual([
     '1rem',
     { '--line-height': '1.5' },
   ])
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index 553a1b151caa..22e658ac78af 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -128,6 +128,8 @@ export function themeableValues(config: ResolvedConfig['theme']): [string[], unk
 const IS_VALID_KEY = /^[a-zA-Z0-9-_%/\.]+$/
 
 export function keyPathToCssProperty(path: string[]) {
+  path = structuredClone(path)
+
   if (path[0] === 'colors') path[0] = 'color'
   if (path[0] === 'screens') path[0] = 'breakpoint'
   if (path[0] === 'borderRadius') path[0] = 'radius'
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 817e2e85c94e..f5780b99f735 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -250,7 +250,7 @@ test('Variants in CSS overwrite variants from plugins', async () => {
 })
 
 describe('theme callbacks', () => {
-  test.only('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
+  test('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
     expect,
   }) => {
     let input = css`
@@ -290,7 +290,6 @@ describe('theme callbacks', () => {
 
               // Tuple access
               typography: ({ theme }) => {
-                console.log(theme('fontSize'))
                 return {
                   '[class~=lead-base]': {
                     fontSize: theme('fontSize.base')[0],
@@ -452,6 +451,8 @@ describe('theme overrides order', () => {
         } else {
           return {
             module: plugin(({ matchUtilities, theme }) => {
+              console.log('input', theme('colors'))
+              console.log('flattened', flattenColorPalette(theme('colors')))
               matchUtilities(
                 {
                   'hover-bg': (value) => {
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.test.ts b/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
new file mode 100644
index 000000000000..3891bbece534
--- /dev/null
+++ b/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
@@ -0,0 +1,32 @@
+import { expect, test } from 'vitest'
+import { flattenColorPalette } from './flatten-color-palette'
+
+test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
+  expect(
+    flattenColorPalette({
+      'slate-100': '#000100',
+      'slate-200': '#000200',
+      'slate-300': '#000300',
+      'slate-400': '#100400',
+      'slate-500': '#100500',
+      __CSS_VALUES__: {
+        'slate-100': 4,
+        'slate-200': 4,
+        'slate-300': 4,
+        'slate-400': 0,
+        'slate-500': 0,
+      } as any,
+      slate: { '200': '#200200', '400': '#200400', '600': '#200600' },
+      'slate-600': '#200600',
+    }),
+  ).toMatchInlineSnapshot(`
+    {
+      "slate-100": "#000100",
+      "slate-200": "#200200",
+      "slate-300": "#000300",
+      "slate-400": "#100400",
+      "slate-500": "#100500",
+      "slate-600": "#200600",
+    }
+  `)
+})
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.ts b/packages/tailwindcss/src/compat/flatten-color-palette.ts
index 198ae060d7c5..0b8426129bc3 100644
--- a/packages/tailwindcss/src/compat/flatten-color-palette.ts
+++ b/packages/tailwindcss/src/compat/flatten-color-palette.ts
@@ -1,3 +1,5 @@
+import { ThemeOptions } from '../theme'
+
 type Colors = {
   [key: string | number]: string | Colors
 }
@@ -6,6 +8,7 @@ export function flattenColorPalette(colors: Colors) {
   let result: Record<string, string> = {}
 
   for (let [root, children] of Object.entries(colors ?? {})) {
+    if (root === '__CSS_VALUES__') continue
     if (typeof children === 'object' && children !== null) {
       for (let [parent, value] of Object.entries(flattenColorPalette(children))) {
         result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value
@@ -15,5 +18,13 @@ export function flattenColorPalette(colors: Colors) {
     }
   }
 
+  if ('__CSS_VALUES__' in colors) {
+    for (let [key, value] of Object.entries(colors.__CSS_VALUES__) as any as [string, number][]) {
+      if ((value & ThemeOptions.DEFAULT) === 0) {
+        result[key] = colors[key] as string
+      }
+    }
+  }
+
   return result
 }
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index bfe86c89538d..48636394745a 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -884,8 +884,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme {
-        --transition-timing-function-in: ease-in;
-        --transition-timing-function-out: ease-out;
+        --ease-in: ease-in;
+        --ease-out: ease-out;
       }
     `
 
diff --git a/packages/tailwindcss/src/compat/plugin-functions.ts b/packages/tailwindcss/src/compat/plugin-functions.ts
index 711adc8c78ff..d13e14ef6f33 100644
--- a/packages/tailwindcss/src/compat/plugin-functions.ts
+++ b/packages/tailwindcss/src/compat/plugin-functions.ts
@@ -4,6 +4,7 @@ import { withAlpha } from '../utilities'
 import { DefaultMap } from '../utils/default-map'
 import { unescape } from '../utils/escape'
 import { toKeyPath } from '../utils/to-key-path'
+import { keyPathToCssProperty } from './apply-config-to-theme'
 import { deepMerge } from './config/deep-merge'
 import type { UserConfig } from './config/types'
 
@@ -72,7 +73,7 @@ export function createThemeFn(
           // CSS values from `@theme` win over values from the config
           configValueCopy[unescape(key)] = cssValue[key]
         }
-
+        // console.log(configValueCopy)
         return configValueCopy
       }
 
@@ -127,21 +128,7 @@ function readFromCss(
     // A nested tuple with additional data
     | [main: string, extra: Record<string, string>]
 
-  let themeKey = path
-    // [1] should move into the nested object tuple. To create the CSS variable
-    // name for this, we replace it with an empty string that will result in two
-    // subsequent dashes when joined.
-    .map((path) => (path === '1' ? '' : path))
-
-    // Resolve the key path to a CSS variable segment
-    .map((part) =>
-      part.replaceAll('.', '_').replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`),
-    )
-
-    // Remove the `DEFAULT` key at the end of a path
-    // We're reading from CSS anyway so it'll be a string
-    .filter((part, index) => part !== 'DEFAULT' || index !== path.length - 1)
-    .join('-')
+  let themeKey = keyPathToCssProperty(path)
 
   let map = new Map<string | null, ThemeValue>()
   let nested = new DefaultMap<string | null, Map<string, [value: string, options: number]>>(
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index cbb7d4e95f4e..26443abcb81e 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -352,8 +352,8 @@ describe('theme function', () => {
           expect(
             await compileCss(css`
               @theme {
-                --font-size-xs: 1337.75rem;
-                --font-size-xs--line-height: 1337rem;
+                --text-xs: 1337.75rem;
+                --text-xs--line-height: 1337rem;
               }
               .text {
                 font-size: theme(fontSize.xs);
@@ -362,8 +362,8 @@ describe('theme function', () => {
             `),
           ).toMatchInlineSnapshot(`
             ":root {
-              --font-size-xs: 1337.75rem;
-              --font-size-xs--line-height: 1337rem;
+              --text-xs: 1337.75rem;
+              --text-xs--line-height: 1337rem;
             }
 
             .text {

From ffd3126145b686c3d00facf8517d22e16b95aeec Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 12:50:04 -0500
Subject: [PATCH 04/12] wip

---
 .../tailwindcss/src/compat/plugin-api.test.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 48636394745a..2bc15a3f6f21 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -401,8 +401,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -459,8 +459,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -513,8 +513,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -560,8 +560,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation-simple-spin: spin 1s linear infinite;
-        --animation-simple-bounce: bounce 1s linear infinite;
+        --animate-simple-spin: spin 1s linear infinite;
+        --animate-simple-bounce: bounce 1s linear infinite;
       }
     `
 
@@ -590,7 +590,8 @@ describe('theme', async () => {
     })
 
     expect(fn).toHaveBeenCalledWith({
-      __CSS_VALUES__: { bounce: 2, spin: 2 },
+      __CSS_VALUES__: { DEFAULT: 7, bounce: 2, spin: 2 },
+      DEFAULT: 'simple 1s linear',
       spin: 'spin 1s linear infinite',
       bounce: 'bounce 1s linear infinite',
     })

From 096f518fb89e684a34aaabbbedfc7796e4ae348f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 12:58:27 -0500
Subject: [PATCH 05/12] Move plugin registration back

---
 packages/tailwindcss/src/compat/apply-compat-hooks.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index 8fe6663a9b0a..c4cfec81cb06 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -225,6 +225,12 @@ function upgradeToFullPluginSupport({
     userConfig,
   )
 
+  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
+
+  for (let { handler } of resolvedConfig.plugins) {
+    handler(pluginApi)
+  }
+
   // Merge the user-configured theme keys into the design system. The compat
   // config would otherwise expand into namespaces like `background-color` which
   // core utilities already read from.
@@ -234,11 +240,6 @@ function upgradeToFullPluginSupport({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
 
-  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
-  for (let { handler } of resolvedConfig.plugins) {
-    handler(pluginApi)
-  }
-
   // If a prefix has already been set in CSS don't override it
   if (!designSystem.theme.prefix && resolvedConfig.prefix) {
     if (resolvedConfig.prefix.endsWith('-')) {

From 66377f4ea720f8b608b68fa7e1be52358af00f98 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 12:58:34 -0500
Subject: [PATCH 06/12] wip

---
 packages/tailwindcss/src/compat/config.test.ts                 | 2 --
 packages/tailwindcss/src/compat/config/create-compat-config.ts | 1 -
 packages/tailwindcss/src/compat/plugin-api.test.ts             | 3 +--
 packages/tailwindcss/src/compat/plugin-functions.ts            | 2 +-
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index f5780b99f735..e72f1d61bab4 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -451,8 +451,6 @@ describe('theme overrides order', () => {
         } else {
           return {
             module: plugin(({ matchUtilities, theme }) => {
-              console.log('input', theme('colors'))
-              console.log('flattened', flattenColorPalette(theme('colors')))
               matchUtilities(
                 {
                   'hover-bg': (value) => {
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts
index f3c6d235e386..5d4714b78f5b 100644
--- a/packages/tailwindcss/src/compat/config/create-compat-config.ts
+++ b/packages/tailwindcss/src/compat/config/create-compat-config.ts
@@ -15,7 +15,6 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
 
       extend: {
         fontSize: ({ theme }) => {
-          console.log(theme('text', {}))
           return {
             ...theme('text', {}),
           }
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 2bc15a3f6f21..d200e22b42dc 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -590,8 +590,7 @@ describe('theme', async () => {
     })
 
     expect(fn).toHaveBeenCalledWith({
-      __CSS_VALUES__: { DEFAULT: 7, bounce: 2, spin: 2 },
-      DEFAULT: 'simple 1s linear',
+      __CSS_VALUES__: { bounce: 2, spin: 2 },
       spin: 'spin 1s linear infinite',
       bounce: 'bounce 1s linear infinite',
     })
diff --git a/packages/tailwindcss/src/compat/plugin-functions.ts b/packages/tailwindcss/src/compat/plugin-functions.ts
index d13e14ef6f33..5f8fc8843383 100644
--- a/packages/tailwindcss/src/compat/plugin-functions.ts
+++ b/packages/tailwindcss/src/compat/plugin-functions.ts
@@ -73,7 +73,7 @@ export function createThemeFn(
           // CSS values from `@theme` win over values from the config
           configValueCopy[unescape(key)] = cssValue[key]
         }
-        // console.log(configValueCopy)
+
         return configValueCopy
       }
 

From bb494438b62349e4fcd4c6991cd10691a899eddf Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 13:04:51 -0500
Subject: [PATCH 07/12] Update tests

---
 integrations/upgrade/js-config.test.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index 398402139853..ccc6e22f96cb 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -158,13 +158,13 @@ test(
         --color-red-500: #ef4444;
         --color-red-600: #dc2626;
 
-        --font-size-*: initial;
-        --font-size-xs: 0.75rem;
-        --font-size-xs--line-height: 1rem;
-        --font-size-sm: 0.875rem;
-        --font-size-sm--line-height: 1.5rem;
-        --font-size-base: 1rem;
-        --font-size-base--line-height: 2rem;
+        --text-*: initial;
+        --text-xs: 0.75rem;
+        --text-xs--line-height: 1rem;
+        --text-sm: 0.875rem;
+        --text-sm--line-height: 1.5rem;
+        --text-base: 1rem;
+        --text-base--line-height: 2rem;
 
         --width-*: initial;
         --width-0: 0%;

From 231b15bfe6d1359aabdf2bbd6ab9e1c59f60272b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 13:12:21 -0500
Subject: [PATCH 08/12] undo formatting change

---
 .../tailwindcss/src/compat/config.test.ts     | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index e72f1d61bab4..6bc18aae5afa 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -289,22 +289,20 @@ describe('theme callbacks', () => {
               }),
 
               // Tuple access
-              typography: ({ theme }) => {
-                return {
-                  '[class~=lead-base]': {
-                    fontSize: theme('fontSize.base')[0],
-                    ...theme('fontSize.base')[1],
-                  },
-                  '[class~=lead-md]': {
-                    fontSize: theme('fontSize.md')[0],
-                    ...theme('fontSize.md')[1],
-                  },
-                  '[class~=lead-xl]': {
-                    fontSize: theme('fontSize.xl')[0],
-                    ...theme('fontSize.xl')[1],
-                  },
-                }
-              },
+              typography: ({ theme }) => ({
+                '[class~=lead-base]': {
+                  fontSize: theme('fontSize.base')[0],
+                  ...theme('fontSize.base')[1],
+                },
+                '[class~=lead-md]': {
+                  fontSize: theme('fontSize.md')[0],
+                  ...theme('fontSize.md')[1],
+                },
+                '[class~=lead-xl]': {
+                  fontSize: theme('fontSize.xl')[0],
+                  ...theme('fontSize.xl')[1],
+                },
+              }),
             },
           },
 

From 8d2788e11ae4a9febae6c2b27bc22eba598f882d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 13:13:00 -0500
Subject: [PATCH 09/12] Cleanup a bit

---
 .../tailwindcss/src/compat/config/create-compat-config.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts
index 5d4714b78f5b..5258eec24214 100644
--- a/packages/tailwindcss/src/compat/config/create-compat-config.ts
+++ b/packages/tailwindcss/src/compat/config/create-compat-config.ts
@@ -14,11 +14,9 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
       colors: ({ theme }) => theme('color', {}),
 
       extend: {
-        fontSize: ({ theme }) => {
-          return {
-            ...theme('text', {}),
-          }
-        },
+        fontSize: ({ theme }) => ({
+          ...theme('text', {}),
+        }),
 
         boxShadow: ({ theme }) => ({
           ...theme('shadow', {}),

From 7e88a3046b2031a5d9f9bb7df0da0ea38edfd80b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 7 Nov 2024 13:16:05 -0500
Subject: [PATCH 10/12] Update Playwright tests

---
 packages/tailwindcss/tests/ui.spec.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index c11d76a61fd8..b8e7a6c8e0a0 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -504,10 +504,10 @@ test('explicit leading utilities are respected when overriding font-size', async
     `,
     css`
       @theme {
-        --font-size-sm: 14px;
-        --font-size-sm--line-height: 16px;
-        --font-size-xl: 20px;
-        --font-size-xl--line-height: 24px;
+        --text-sm: 14px;
+        --text-sm--line-height: 16px;
+        --text-xl: 20px;
+        --text-xl--line-height: 24px;
         --line-height-tight: 8px;
       }
     `,
@@ -536,10 +536,10 @@ test('explicit leading utilities are overridden by line-height modifiers', async
     `,
     css`
       @theme {
-        --font-size-sm: 14px;
-        --font-size-sm--line-height: 16px;
-        --font-size-xl: 20px;
-        --font-size-xl--line-height: 24px;
+        --text-sm: 14px;
+        --text-sm--line-height: 16px;
+        --text-xl: 20px;
+        --text-xl--line-height: 24px;
         --line-height-tight: 8px;
       }
     `,
@@ -568,8 +568,8 @@ test('explicit tracking utilities are respected when overriding font-size', asyn
     `,
     css`
       @theme {
-        --font-size-sm--letter-spacing: 5px;
-        --font-size-xl--letter-spacing: 10px;
+        --text-sm--letter-spacing: 5px;
+        --text-xl--letter-spacing: 10px;
         --letter-spacing-tight: 1px;
       }
     `,
@@ -598,8 +598,8 @@ test('explicit font-weight utilities are respected when overriding font-size', a
     `,
     css`
       @theme {
-        --font-size-sm--font-weight: 100;
-        --font-size-xl--font-weight: 200;
+        --text-sm--font-weight: 100;
+        --text-xl--font-weight: 200;
       }
     `,
   )

From cec060be38547bdbaa56942ca9dd6b89b81139d5 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:59:05 -0500
Subject: [PATCH 11/12] Convert to number instead of typecast

---
 packages/tailwindcss/src/compat/flatten-color-palette.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.ts b/packages/tailwindcss/src/compat/flatten-color-palette.ts
index 0b8426129bc3..03191e2da7e6 100644
--- a/packages/tailwindcss/src/compat/flatten-color-palette.ts
+++ b/packages/tailwindcss/src/compat/flatten-color-palette.ts
@@ -19,8 +19,8 @@ export function flattenColorPalette(colors: Colors) {
   }
 
   if ('__CSS_VALUES__' in colors) {
-    for (let [key, value] of Object.entries(colors.__CSS_VALUES__) as any as [string, number][]) {
-      if ((value & ThemeOptions.DEFAULT) === 0) {
+    for (let [key, value] of Object.entries(colors.__CSS_VALUES__)) {
+      if ((Number(value) & ThemeOptions.DEFAULT) === 0) {
         result[key] = colors[key] as string
       }
     }

From e6f33faf748f1dcee6e97cfa58fb3a2311b2c9bf Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:07:49 -0500
Subject: [PATCH 12/12] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 399e4c53d7c4..b7f3f1b4c55e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
 - Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
 - Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
+- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
 
 ## [4.0.0-alpha.31] - 2024-10-29