diff --git a/CHANGELOG.md b/CHANGELOG.md
index edeb569adaeb..8a9ccfdab991 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
 
+### Fixed
+
+- Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
+
 ## [4.1.14] - 2025-10-01
 
 ### Fixed
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index be48a2ac4898..e9ffde539c31 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -1901,7 +1901,9 @@ test(
           ::placeholder {
             color: currentcolor;
             @supports (color: color-mix(in lab, red, red)) {
-              color: color-mix(in oklab, currentcolor 50%, transparent);
+              & {
+                color: color-mix(in oklab, currentcolor 50%, transparent);
+              }
             }
           }
         }
@@ -1944,7 +1946,9 @@ test(
         .bg-red-500\\/50 {
           background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+            & {
+              background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+            }
           }
         }
         .shadow-md {
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index a473b9193e7f..1ca7b7d6233b 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -662,7 +662,9 @@ export function optimizeAst(
           ...declaration,
           value: ValueParser.toCss(ast),
         }
-        let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
+        let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [
+          rule('&', [declaration]),
+        ])
         colorMixQuery.src = declaration.src
         parent.splice(idx, 1, fallback, colorMixQuery)
       }
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 4e35afa5a84e..05b9e4497180 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -299,7 +299,9 @@ describe('theme', async () => {
       .variable {
         color: #ef4444;
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
+          & {
+            color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
+          }
         }
       }
       "
@@ -377,7 +379,9 @@ describe('theme', async () => {
       .css-variable {
         color: rgba(255 0 0 / <alpha-value>);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+          & {
+            color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+          }
         }
       }
       .js-fraction {
@@ -389,7 +393,9 @@ describe('theme', async () => {
       .js-variable {
         color: rgb(255 0 0 / 1);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
+          & {
+            color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
+          }
         }
       }
       "
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
index f82ca536f968..4c9939baef02 100644
--- a/packages/tailwindcss/src/source-maps/source-map.test.ts
+++ b/packages/tailwindcss/src/source-maps/source-map.test.ts
@@ -265,33 +265,33 @@ test('source maps trace back to @import location', async ({ expect }) => {
     'preflight.css: 118:4-18 <- 293:2-16',
     'preflight.css: 119:6-25 <- 294:4-61',
     'preflight.css: 120:6-53 <- 294:4-61',
-    'preflight.css: 121:8-65 <- 294:4-61',
-    'preflight.css: 125:2-11 <- 302:0-9',
-    'preflight.css: 126:4-20 <- 303:2-18',
-    'preflight.css: 128:2-30 <- 310:0-28',
-    'preflight.css: 129:4-28 <- 311:2-26',
-    'preflight.css: 131:2-32 <- 319:0-30',
-    'preflight.css: 132:4-19 <- 320:2-17',
-    'preflight.css: 133:4-23 <- 321:2-21',
-    'preflight.css: 135:2-26 <- 328:0-24',
-    'preflight.css: 136:4-24 <- 329:2-22',
-    'preflight.css: 138:2-41 <- 336:0-39',
-    'preflight.css: 139:4-14 <- 337:2-12',
-    'preflight.css: 141:2-329 <- 340:0-348:39',
-    'preflight.css: 142:4-20 <- 349:2-18',
-    'preflight.css: 144:2-38 <- 356:0-36',
-    'preflight.css: 145:4-18 <- 357:2-16',
-    'preflight.css: 147:2-19 <- 364:0-17',
-    'preflight.css: 148:4-20 <- 365:2-18',
-    'preflight.css: 150:2-96 <- 372:0-374:23',
-    'preflight.css: 151:4-22 <- 375:2-20',
-    'preflight.css: 153:2-59 <- 382:0-383:28',
-    'preflight.css: 154:4-16 <- 384:2-14',
-    'preflight.css: 156:2-47 <- 391:0-45',
-    'preflight.css: 157:4-28 <- 392:2-26',
-    'index.css: 160:0-16 <- 5:0-42',
-    'input.css: 161:0-5 <- 3:0-5',
-    'input.css: 162:2-33 <- 4:9-18',
+    'preflight.css: 122:10-67 <- 294:4-61',
+    'preflight.css: 127:2-11 <- 302:0-9',
+    'preflight.css: 128:4-20 <- 303:2-18',
+    'preflight.css: 130:2-30 <- 310:0-28',
+    'preflight.css: 131:4-28 <- 311:2-26',
+    'preflight.css: 133:2-32 <- 319:0-30',
+    'preflight.css: 134:4-19 <- 320:2-17',
+    'preflight.css: 135:4-23 <- 321:2-21',
+    'preflight.css: 137:2-26 <- 328:0-24',
+    'preflight.css: 138:4-24 <- 329:2-22',
+    'preflight.css: 140:2-41 <- 336:0-39',
+    'preflight.css: 141:4-14 <- 337:2-12',
+    'preflight.css: 143:2-329 <- 340:0-348:39',
+    'preflight.css: 144:4-20 <- 349:2-18',
+    'preflight.css: 146:2-38 <- 356:0-36',
+    'preflight.css: 147:4-18 <- 357:2-16',
+    'preflight.css: 149:2-19 <- 364:0-17',
+    'preflight.css: 150:4-20 <- 365:2-18',
+    'preflight.css: 152:2-96 <- 372:0-374:23',
+    'preflight.css: 153:4-22 <- 375:2-20',
+    'preflight.css: 155:2-59 <- 382:0-383:28',
+    'preflight.css: 156:4-16 <- 384:2-14',
+    'preflight.css: 158:2-47 <- 391:0-45',
+    'preflight.css: 159:4-28 <- 392:2-26',
+    'index.css: 162:0-16 <- 5:0-42',
+    'input.css: 163:0-5 <- 3:0-5',
+    'input.css: 164:2-33 <- 4:9-18',
   ])
 })