diff --git a/packages/tailwindcss/src/compat/merge-into-theme.ts b/packages/tailwindcss/src/compat/merge-into-theme.ts
index 8929db6bf..479ff2d05 100644
--- a/packages/tailwindcss/src/compat/merge-into-theme.ts
+++ b/packages/tailwindcss/src/compat/merge-into-theme.ts
@@ -42,6 +42,10 @@ function themeableValues(config: ResolvedConfig['theme']): [string[], unknown][]
 }
 
 function keyPathToCssProperty(path: string[]) {
+  if (path[0] === 'colors') {
+    path[0] = 'color'
+  }
+
   return (
     path
       // [1] should move into the nested object tuple. To create the CSS variable