fix: preserve opacity values in multiple shadows using color-mix

packages/tailwindcss/src/utils/replace-shadow-colors.test.ts

@@ -49,6 +49,51 @@ describe('without replacer', () => {
       `"var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color))"`,
     )
   })
+
+  it('should preserve alpha from rgba color with modern syntax', () => {
+    let parsed = replaceShadowColors('rgba(0 0 0 / 0.12) 0px 1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 12%) 0px 1px 2px"`,
+    )
+  })
+
+  it('should preserve alpha from rgba color with legacy syntax', () => {
+    let parsed = replaceShadowColors('rgba(0, 0, 0, 0.12) 0px 1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0, 0, 0)) 12%) 0px 1px 2px"`,
+    )
+  })
+
+  it('should preserve alpha from rgba color with percentage', () => {
+    let parsed = replaceShadowColors('rgba(0 0 0 / 50%) 0px 1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 50%) 0px 1px 2px"`,
+    )
+  })
+
+  it('should preserve alpha from hsla color', () => {
+    let parsed = replaceShadowColors('hsla(0 0% 0% / 0.3) 0px 1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"color-mix(in srgb, transparent, var(--tw-shadow-color, hsl(0 0% 0%)) 30%) 0px 1px 2px"`,
+    )
+  })
+
+  it('should preserve different alpha values for multiple shadows', () => {
+    let parsed = replaceShadowColors(
+      'rgba(0 0 0 / 0.12) 0px -1px 3px 0px, rgba(0 0 0 / 0.14) 0px 2px 5px -5px, rgba(0 0 0 / 0.17) 0px 12px 15px -5px',
+      replacer,
+    )
+    expect(parsed).toMatchInlineSnapshot(
+      `"color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 12%) 0px -1px 3px 0px, color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 14%) 0px 2px 5px -5px, color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 17%) 0px 12px 15px -5px"`,
+    )
+  })
+
+  it('should handle mixed colors with and without alpha', () => {
+    let parsed = replaceShadowColors('#000 0px 1px 2px, rgba(0 0 0 / 0.5) 0px 2px 4px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"var(--tw-shadow-color, #000) 0px 1px 2px, color-mix(in srgb, transparent, var(--tw-shadow-color, rgb(0 0 0)) 50%) 0px 2px 4px"`,
+    )
+  })
 })
 
 describe('with replacer', () => {
@@ -84,4 +129,11 @@ describe('with replacer', () => {
       `"var(--my-shadow), 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%)), 0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
     )
   })
+
+  it('should use modifier alpha instead of original alpha when both are present', () => {
+    let parsed = replaceShadowColors('rgba(0 0 0 / 0.12) 0px 1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"var(--tw-shadow-color, oklab(from rgb(0 0 0) l a b / 50%)) 0px 1px 2px"`,
+    )
+  })
 })

packages/tailwindcss/src/utils/replace-shadow-colors.ts

@@ -3,6 +3,77 @@ import { segment } from './segment'
 const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
 const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
+/**
+ * Extract the alpha channel from a color value.
+ * Returns the alpha as a percentage string (e.g., "12%") or null if no alpha is found.
+ */
+function extractAlpha(color: string): string | null {
+  // Modern rgba/hsla syntax with slash: rgba(0 0 0 / 0.12) or rgba(0 0 0 / 12%)
+  const slashAlphaMatch = color.match(/\/\s*([\d.]+)%?\s*\)/)
+  if (slashAlphaMatch) {
+    let alpha = slashAlphaMatch[1]
+    // If it's already a percentage, return it
+    if (slashAlphaMatch[0].includes('%')) {
+      return `${alpha}%`
+    }
+    // Convert decimal to percentage
+    const alphaNum = parseFloat(alpha)
+    if (!isNaN(alphaNum)) {
+      // Round to avoid floating point precision issues
+      return `${Math.round(alphaNum * 100)}%`
+    }
+    return null
+  }
+
+  // Legacy rgba/hsla syntax with comma: rgba(0, 0, 0, 0.12)
+  // Must be rgba/hsla (with 'a') to have 4 values where the last is alpha`n  const commaAlphaMatch = color.match(/^(?:rgba|hsla)\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\s*\)$/i)
+  if (commaAlphaMatch) {
+    const alpha = commaAlphaMatch[1]
+    const alphaNum = parseFloat(alpha)
+    if (!isNaN(alphaNum)) {
+      // Round to avoid floating point precision issues
+      return `${Math.round(alphaNum * 100)}%`
+    }
+    return null
+  }
+
+  // No alpha found
+  return null
+}
+
+/**
+ * Extract the base color without the alpha channel.
+ * For rgba/hsla, returns rgb/hsl with the same values but without alpha.
+ * For other colors, returns as-is.
+ */
+function stripAlpha(color: string): string {
+  // Modern rgba/hsla syntax with slash: rgba(0 0 0 / 0.12) or hsla(0 0% 0% / 0.3)
+  const slashMatch = color.match(/^(rgba?|hsla?)\(([\d\s.%]+)\s*\/\s*[\d.]+%?\s*\)$/i)
+  if (slashMatch) {
+    const type = slashMatch[1].toLowerCase().replace('a', '')
+    const values = slashMatch[2].trim()
+    return `${type}(${values})`
+  }
+
+  // Legacy rgba/hsla syntax with comma: rgba(0, 0, 0, 0.12) or hsla(0, 0%, 0%, 0.3)
+  const commaMatch = color.match(/^(rgba?|hsla?)\(([\d\s.,%]+),\s*[\d.]+\s*\)$/i)
+  if (commaMatch) {
+    const type = commaMatch[1].toLowerCase().replace('a', '')
+    const values = commaMatch[2].trim()
+    return `${type}(${values})`
+  }
+
+  // No alpha to strip
+  return color
+}
+
+/**
+ * Check if a string already contains alpha handling (oklab, color-mix, etc.)
+ */
+function hasAlphaHandling(value: string): boolean {
+  return value.includes('oklab(') || value.includes('color-mix(') || value.includes('oklch(')
+}
+
 export function replaceShadowColors(input: string, replacement: (color: string) => string) {
   let shadows = segment(input, ',').map((shadow) => {
     shadow = shadow.trim()
@@ -33,7 +104,25 @@ export function replaceShadowColors(input: string, replacement: (color: string)
     // we can't know what to replace.
     if (offsetX === null || offsetY === null) return shadow
 
-    let replacementColor = replacement(color ?? 'currentcolor')
+    // Extract alpha from the original color if present
+    let alpha: string | null = null
+    let baseColor: string = color ?? 'currentcolor'
+
+    if (color) {
+      alpha = extractAlpha(color)
+      if (alpha) {
+        baseColor = stripAlpha(color)
+      }
+    }
+
+    let replacementColor = replacement(baseColor)
+
+    // Only apply color-mix wrapping if:
+    // 1. The original color had an alpha channel
+    // 2. The replacement doesn't already have alpha handling (oklab, color-mix, etc.)
+    if (alpha && !hasAlphaHandling(replacementColor)) {
+      replacementColor = `color-mix(in srgb, transparent, ${replacementColor} ${alpha})`
+    }
 
     if (color !== null) {
       // If a color was found, replace the color.