From 2fc57c217f5056065a7097e4bb8521f571dce728 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 20 Nov 2025 20:21:01 -0500
Subject: [PATCH 1/2] Read from `--content` theme namespace for `content-*`
 utilities

---
 packages/tailwindcss/src/utilities.test.ts | 21 ++++++++++++++++++++-
 packages/tailwindcss/src/utilities.ts      |  4 +++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 233d3fa23bce..732e4ab9a818 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/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;
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 521cf974d9d6..5e7877825b81 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/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),

From d1c2b64d0d8fbd2e86fe126781173ed6d18338e6 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sat, 29 Nov 2025 11:11:15 -0500
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1fba8eaf94a2..cde9ced51ed1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Skip over arbitrary property utilities with a top-level `!` in the value ([#19243](https://github.com/tailwindlabs/tailwindcss/pull/19243))
 - Support environment API in `@tailwindcss/vite` ([#18970](https://github.com/tailwindlabs/tailwindcss/pull/18970))
 - Preserve case of theme keys from JS configs and plugins ([#19337](https://github.com/tailwindlabs/tailwindcss/pull/19337))
+- 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))
 
 ### Added