Output theme variables with a prefix

packages/tailwindcss/src/compat/prefix.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from 'vitest'
 import { compile } from '..'
+import plugin from '../plugin'
 
 const css = String.raw
 
@@ -72,6 +73,101 @@ test('utilities used in @apply must be prefixed', async () => {
   )
 })
 
+test('CSS variables output by the theme are prefixed', async () => {
+  let compiler = await compile(css`
+    @theme prefix(tw) {
+      --color-red: #f00;
+      --color-green: #0f0;
+      --breakpoint-sm: 640px;
+    }
+
+    @tailwind utilities;
+  `)
+
+  // Prefixed utilities are generated
+  expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(`
+    ":root {
+      --tw-color-red: #f00;
+      --tw-color-green: #0f0;
+      --tw-breakpoint-sm: 640px;
+    }
+    .tw\\:text-red {
+      color: var(--tw-color-red, #f00);
+    }
+    "
+  `)
+})
+
+test('CSS theme functions do not need to use the prefix', async () => {
+  let compiler = await compile(css`
+    @theme prefix(tw) {
+      --color-red: #f00;
+      --color-green: #0f0;
+      --breakpoint-sm: 640px;
+    }
+
+    @tailwind utilities;
+  `)
+
+  expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]']))
+    .toMatchInlineSnapshot(`
+    ":root {
+      --tw-color-red: #f00;
+      --tw-color-green: #0f0;
+      --tw-breakpoint-sm: 640px;
+    }
+    .tw\\:\\[color\\:theme\\(--color-red\\)\\] {
+      color: #f00;
+    }
+    .tw\\:text-\\[theme\\(--color-red\\)\\] {
+      color: #f00;
+    }
+    "
+  `)
+})
+
+test('JS theme functions do not need to use the prefix', async () => {
+  let compiler = await compile(
+    css`
+      @theme prefix(tw) {
+        --color-red: #f00;
+        --color-green: #0f0;
+        --breakpoint-sm: 640px;
+      }
+
+      @plugin "./plugin.js";
+
+      @tailwind utilities;
+    `,
+    {
+      async loadModule(id, base) {
+        return {
+          base,
+          module: plugin(({ addUtilities, theme }) => {
+            addUtilities({
+              '.my-custom': {
+                color: theme('--color-red'),
+              },
+            })
+          }),
+        }
+      },
+    },
+  )
+
+  expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(`
+    ":root {
+      --tw-color-red: #f00;
+      --tw-color-green: #0f0;
+      --tw-breakpoint-sm: 640px;
+    }
+    .tw\\:my-custom {
+      color: #f00;
+    }
+    "
+  `)
+})
+
 test('a prefix can be configured via @import theme(…)', async () => {
   let input = css`
     @import 'tailwindcss/theme' theme(reference prefix(tw));

packages/tailwindcss/src/theme.ts

@@ -76,7 +76,17 @@ export class Theme {
   }
 
   entries() {
-    return this.values.entries()
+    if (!this.prefix) return this.values.entries()
+
+    return Array.from(this.values, (entry) => {
+      entry[0] = this.#prefixKey(entry[0])
+      return entry
+    })
+  }
+
+  #prefixKey(key: string) {
+    if (!this.prefix) return key
+    return `--${this.prefix}-${key.slice(2)}`
   }
 
   #clearNamespace(namespace: string) {
@@ -105,7 +115,7 @@ export class Theme {
       return null
     }
 
-    return `var(${themeKey}, ${this.values.get(themeKey)?.value})`
+    return `var(${this.#prefixKey(themeKey)}, ${this.values.get(themeKey)?.value})`
   }
 
   resolve(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {