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 d8b0a238fbd0..9e18f1872e9d 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
@@ -6,6 +6,10 @@ test.each([
   // Keep candidates that don't contain `theme(…)` or `theme(…, …)`
   ['[color:red]', '[color:red]'],
 
+  // 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)]'],
+
   // Convert to `var(…)` if we can resolve the path
   ['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property
   ['[color:theme(colors.red.500)]/50', '[color:var(--color-red-500)]/50'], // Arbitrary property + modifier
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index 9edf038e4dc1..a8dd432539a8 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -142,7 +142,11 @@ export function keyPathToCssProperty(path: string[]) {
       // [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))
+      //
+      // E.g.:
+      // - `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height`
+      // - `spacing.1` -> `--spacing-1`
+      .map((path, idx, all) => (path === '1' && idx !== all.length - 1 ? '' : path))
 
       // Resolve the key path to a CSS variable segment
       .map((part) =>