Repository: tailwindlabs/tailwindcss

Problem statement:
`shadow-inherit` is broken
**What version of Tailwind CSS are you using?**

For example: v4.1.3

**What build tool (or framework if it abstracts the build tool) are you using?**

Tailwind Play

**What version of Node.js are you using?**

Tailwind Play

**What browser are you using?**

Firefox and Chrome

**What operating system are you using?**

Windows

**Reproduction URL**

https://play.tailwindcss.com/FYzL24UYiA

**Describe your issue**

No shadow is shown when using `shadow-inherit`.

When using `shadow-inherit` the following property is generated:

```css
--tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent);
```

I don't think `inherit` is a [`<color>`](https://developer.mozilla.org/docs/Web/CSS/color_value) as required by [`color-mix()`](https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix). I also suppose browsers don't reject the declaration as invalid because it's assigning to a CSS variable with syntax "*".

Regression from 60b0da9?

cc @philipp-spiess 


Hints:
Seems like `inherit` is incompatible with the intensity modifiers of box shadows introduced in https://github.com/tailwindlabs/tailwindcss/pull/17398. I guess the `color-mix()` could be removed from the `inherit` value, or ~~to retain the intensity modifier, we move the intensity `color-mix()` into the `shadow-<size>` class~~? (can't do that, otherwise the compatibility fallbacks for the `color-mix()` won't work)

Patch:
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -4399,6 +4399,14 @@ export function createUtilities(theme: Theme) {
       {
         let value = resolveThemeColor(candidate, theme, ['--drop-shadow-color', '--color'])
         if (value) {
+          if (value === 'inherit') {
+            return [
+              filterProperties(),
+              decl('--tw-drop-shadow-color', 'inherit'),
+              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
+            ]
+          }
+
           return [
             filterProperties(),
             decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
@@ -5127,6 +5135,10 @@ export function createUtilities(theme: Theme) {
       case 'none':
         if (candidate.modifier) return
         return [textShadowProperties(), decl('text-shadow', 'none')]
+
+      case 'inherit':
+        if (candidate.modifier) return
+        return [textShadowProperties(), decl('--tw-text-shadow-color', 'inherit')]
     }
 
     // Shadow size
@@ -5275,6 +5287,10 @@ export function createUtilities(theme: Theme) {
             decl('--tw-shadow', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
+
+        case 'inherit':
+          if (candidate.modifier) return
+          return [boxShadowProperties(), decl('--tw-shadow-color', 'inherit')]
       }
 
       // Shadow size
@@ -5397,6 +5413,10 @@ export function createUtilities(theme: Theme) {
             decl('--tw-inset-shadow', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
+
+        case 'inherit':
+          if (candidate.modifier) return
+          return [boxShadowProperties(), decl('--tw-inset-shadow-color', 'inherit')]
       }
 
       // Shadow size


Test patch:
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -20943,6 +20943,8 @@ test('filter', async () => {
         'drop-shadow-[0_0_red]',
         'drop-shadow-red-500',
         'drop-shadow-red-500/50',
+        'drop-shadow-none',
+        'drop-shadow-inherit',
         'saturate-0',
         'saturate-[1.75]',
         'saturate-[var(--value)]',
@@ -21046,6 +21048,16 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .drop-shadow-none {
+      --tw-drop-shadow: ;
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
+    .drop-shadow-inherit {
+      --tw-drop-shadow-color: inherit;
+      --tw-drop-shadow: var(--tw-drop-shadow-size);
+    }
+
     .drop-shadow-red-500 {
       --tw-drop-shadow-color: #ef4444;
       --tw-drop-shadow: var(--tw-drop-shadow-size);
@@ -23568,12 +23580,6 @@ test('text-shadow', async () => {
       --tw-text-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-inherit {
-        --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
     .text-shadow-none {
       text-shadow: none;
     }
@@ -23968,12 +23974,6 @@ test('shadow', async () => {
       --tw-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-inherit {
-        --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent);
-      }
-    }
-
     .shadow-red-500 {
       --tw-shadow-color: #ef4444;
     }
@@ -24447,12 +24447,6 @@ test('inset-shadow', async () => {
       --tw-inset-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-inherit {
-        --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
     .inset-shadow-red-500 {
       --tw-inset-shadow-color: #ef4444;
     }