Handle backwards compatibility for content theme from JS configs (#19381)

Fixes #19343

This PR makes it so the `content-*` utilities read from the
`--content-*` theme namespace. This change is **purely for backwards
compatibility with Tailwind CSS v3**. It is recommended you use
arbitrary values with the `content-*` utility instead.

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Preserve case of theme keys from JS configs and plugins ([#19337](https://github.com/tailwindlabs/tailwindcss/pull/19337))
 - Write source maps correctly on the CLI when using `--watch` ([#19373](https://github.com/tailwindlabs/tailwindcss/pull/19373))
 - Handle special defaults (like `ringColor.DEFAULT`) in JS configs ([#19348](https://github.com/tailwindlabs/tailwindcss/pull/19348))
+- Improve backwards compatibility for `content` theme key from JS configs ([#19381](https://github.com/tailwindlabs/tailwindcss/pull/19381))
 - Upgrade: Handle `future` and `experimental` config keys ([#19344](https://github.com/tailwindlabs/tailwindcss/pull/19344))
 - Try to canonicalize any arbitrary utility to a bare value ([#19379](https://github.com/tailwindlabs/tailwindcss/pull/19379))
 

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),