Handle prefix key in configs and plugins

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -208,6 +208,11 @@ export async function applyCompatibilityHooks({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
 
+  // If a prefix has already been set in CSS don't override it
+  if (!designSystem.theme.prefix) {
+    designSystem.theme.prefix = resolvedConfig.prefix
+  }
+
   // Replace `resolveThemeValue` with a version that is backwards compatible
   // with dot-notation but also aware of any JS theme configurations registered
   // by plugins or JS config files. This is significantly slower than just

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

@@ -1217,3 +1217,135 @@ test('merges css breakpoints with js config screens', async () => {
       "
     `)
 })
+
+test('utilities must be prefixed', async () => {
+  let input = css`
+    @tailwind utilities;
+    @config "./config.js";
+
+    @utility custom {
+      color: red;
+    }
+  `
+
+  let compiler = await compile(input, {
+    loadModule: async (id, base) => ({
+      base,
+      module: { prefix: 'tw' },
+    }),
+  })
+
+  // Prefixed utilities are generated
+  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
+    .toMatchInlineSnapshot(`
+    ".tw\\:custom {
+      color: red;
+    }
+    .tw\\:underline {
+      text-decoration-line: underline;
+    }
+    .tw\\:hover\\:line-through {
+      &:hover {
+        text-decoration-line: line-through;
+      }
+    }
+    "
+  `)
+
+  // Non-prefixed utilities are ignored
+  compiler = await compile(input, {
+    loadModule: async (id, base) => ({
+      base,
+      module: { prefix: 'tw' },
+    }),
+  })
+
+  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
+})
+
+test('utilities used in @apply must be prefixed', async () => {
+  let compiler = await compile(
+    css`
+      @config "./config.js";
+
+      .my-underline {
+        @apply tw:underline;
+      }
+    `,
+    {
+      loadModule: async (id, base) => ({
+        base,
+        module: { prefix: 'tw' },
+      }),
+    },
+  )
+
+  // Prefixed utilities are generated
+  expect(compiler.build([])).toMatchInlineSnapshot(`
+    ".my-underline {
+      text-decoration-line: underline;
+    }
+    "
+  `)
+
+  // Non-prefixed utilities cause an error
+  expect(() =>
+    compile(
+      css`
+        @config "./config.js";
+
+        .my-underline {
+          @apply underline;
+        }
+      `,
+      {
+        loadModule: async (id, base) => ({
+          base,
+          module: { prefix: 'tw' },
+        }),
+      },
+    ),
+  ).rejects.toThrowErrorMatchingInlineSnapshot(
+    `[Error: Cannot apply unknown utility class: underline]`,
+  )
+})
+
+test('Prefixes configured in CSS take precedence over those defined in JS configs', async () => {
+  let compiler = await compile(
+    css`
+      @theme prefix(wat) {
+        --color-red: #f00;
+        --color-green: #0f0;
+        --breakpoint-sm: 640px;
+      }
+
+      @config "./plugin.js";
+
+      @tailwind utilities;
+
+      @utility custom {
+        color: red;
+      }
+    `,
+    {
+      async loadModule(id, base) {
+        return {
+          base,
+          module: { prefix: 'tw' },
+        }
+      },
+    },
+  )
+
+  expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(`
+    ":root {
+      --wat-color-red: #f00;
+      --wat-color-green: #0f0;
+      --wat-breakpoint-sm: 640px;
+    }
+    .wat\\:custom {
+      color: red;
+    }
+    "
+  `)
+})

packages/tailwindcss/src/compat/config/resolve-config.ts

@@ -27,6 +27,7 @@ interface ResolutionContext {
 }
 
 let minimal: ResolvedConfig = {
+  prefix: '',
   darkMode: null,
   theme: {},
   plugins: [],
@@ -54,11 +55,15 @@ export function resolveConfig(design: DesignSystem, files: ConfigFile[]): Resolv
     extractConfigs(ctx, file)
   }
 
-  // Merge dark mode
+  // Merge top level keys
   for (let config of ctx.configs) {
     if ('darkMode' in config && config.darkMode !== undefined) {
       ctx.result.darkMode = config.darkMode ?? null
     }
+
+    if ('prefix' in config && config.prefix !== undefined) {
+      ctx.result.prefix = config.prefix ?? ''
+    }
   }
 
   // Merge themes

packages/tailwindcss/src/compat/config/types.ts

@@ -69,3 +69,12 @@ export interface UserConfig {
 export interface ResolvedConfig {
   darkMode: DarkModeStrategy | null
 }
+
+// `prefix` support
+export interface UserConfig {
+  prefix?: string
+}
+
+export interface ResolvedConfig {
+  prefix: string
+}