Read from --content theme namespace for content-* utilities

Author: thecrypticace

packages/tailwindcss/src/utilities.test.ts

@@ -23259,7 +23259,17 @@ test('contain', async () => {
 })
 
 test('content', async () => {
-  expect(await run(['content-["hello_world"]'])).toMatchInlineSnapshot(`
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --content-slash: '/';
+        }
+        @tailwind utilities;
+      `,
+      ['content-slash', 'content-["hello_world"]'],
+    ),
+  ).toMatchInlineSnapshot(`
     "@layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
@@ -23268,11 +23278,20 @@ test('content', async () => {
       }
     }
 
+    :root, :host {
+      --content-slash: "/";
+    }
+
     .content-\\[\\"hello_world\\"\\] {
       --tw-content: "hello world";
       content: var(--tw-content);
     }
 
+    .content-slash {
+      --tw-content: var(--content-slash);
+      content: var(--tw-content);
+    }
+
     @property --tw-content {
       syntax: "*";
       inherits: false;

packages/tailwindcss/src/utilities.ts

@@ -4688,7 +4688,9 @@ export function createUtilities(theme: Theme) {
     ['content', 'none'],
   ])
   functionalUtility('content', {
-    themeKeys: [],
+    // BC: We only read from the `--content` theme key for compatibility reasons. It's recommended
+    // to use the utility with arbitrary values instead.
+    themeKeys: ['--content'],
     handle: (value) => [
       atRoot([property('--tw-content', '""')]),
       decl('--tw-content', value),