Remove named opacity support for color opacity modifiers

CHANGELOG.md

@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix fallback values when using the CSS `theme()` function ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
 - Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265))
 
+## Changed
+
+- Remove named opacity support for color opacity modifiers ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
+
 ## [4.0.0-alpha.20] - 2024-08-23
 
 ### Added

packages/tailwindcss/src/compile.ts

@@ -235,7 +235,7 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
     // Assumption: If an arbitrary property has a modifier, then we assume it
     // is an opacity modifier.
     if (candidate.modifier) {
-      value = asColor(value, candidate.modifier, designSystem.theme)
+      value = asColor(value, candidate.modifier)
     }
 
     if (value === null) return []

packages/tailwindcss/src/utilities.test.ts

@@ -9610,28 +9610,15 @@ test('bg', async () => {
   expect(
     await compileCss(
       css`
-        @theme {
+        @theme reference {
           --opacity-half: 0.5;
           --opacity-custom: var(--custom-opacity);
         }
         @tailwind utilities;
       `,
-      ['bg-current/half', 'bg-current/custom'],
+      ['bg-current/half', 'bg-current/custom', '[color:red]/half'],
     ),
-  ).toMatchInlineSnapshot(`
-    ":root {
-      --opacity-half: .5;
-      --opacity-custom: var(--custom-opacity);
-    }
-
-    .bg-current\\/custom {
-      background-color: color-mix(in srgb, currentColor calc(var(--opacity-custom, var(--custom-opacity)) * 100%), transparent);
-    }
-
-    .bg-current\\/half {
-      background-color: color-mix(in srgb, currentColor calc(var(--opacity-half, .5) * 100%), transparent);
-    }"
-  `)
+  ).toEqual('')
 })
 
 test('from', async () => {

packages/tailwindcss/src/utilities.ts

@@ -129,24 +129,13 @@ export function withAlpha(value: string, alpha: string): string {
 /**
  * Resolve a color value + optional opacity modifier to a final color.
  */
-export function asColor(
-  value: string,
-  modifier: CandidateModifier | null,
-  theme: Theme,
-): string | null {
+export function asColor(value: string, modifier: CandidateModifier | null): string | null {
   if (!modifier) return value
 
   if (modifier.kind === 'arbitrary') {
     return withAlpha(value, modifier.value)
   }
 
-  // Check if the modifier exists in the `opacity` theme configuration and use
-  // that value if so.
-  let alpha = theme.resolve(modifier.value, ['--opacity'])
-  if (alpha) {
-    return withAlpha(value, alpha)
-  }
-
   if (Number.isNaN(Number(modifier.value))) {
     return null
   }
@@ -208,7 +197,7 @@ function resolveThemeColor<T extends ColorThemeKey>(
     }
   }
 
-  return value ? asColor(value, candidate.modifier, theme) : null
+  return value ? asColor(value, candidate.modifier) : null
 }
 
 export function createUtilities(theme: Theme) {
@@ -360,7 +349,7 @@ export function createUtilities(theme: Theme) {
         value = candidate.value.value
 
         // Apply an opacity modifier to the value if appropriate.
-        value = asColor(value, candidate.modifier, theme)
+        value = asColor(value, candidate.modifier)
       } else {
         value = resolveThemeColor(candidate, theme, desc.themeKeys)
       }
@@ -2241,7 +2230,7 @@ export function createUtilities(theme: Theme) {
               return [borderProperties(), ...decls]
             }
             default: {
-              value = asColor(value, candidate.modifier, theme)
+              value = asColor(value, candidate.modifier)
               if (value === null) return
 
               return desc.color(value)
@@ -2549,7 +2538,7 @@ export function createUtilities(theme: Theme) {
           return [decl('background-image', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('background-color', value)]
@@ -2625,7 +2614,7 @@ export function createUtilities(theme: Theme) {
             return desc.position(value)
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return desc.color(value)
@@ -2763,7 +2752,7 @@ export function createUtilities(theme: Theme) {
     if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
-      let value = asColor(candidate.value.value, candidate.modifier, theme)
+      let value = asColor(candidate.value.value, candidate.modifier)
       if (value === null) return
       return [decl('fill', value)]
     }
@@ -2801,7 +2790,7 @@ export function createUtilities(theme: Theme) {
           return [decl('stroke-width', value)]
         }
         default: {
-          value = asColor(candidate.value.value, candidate.modifier, theme)
+          value = asColor(candidate.value.value, candidate.modifier)
           if (value === null) return
 
           return [decl('stroke', value)]
@@ -3099,7 +3088,7 @@ export function createUtilities(theme: Theme) {
           return [decl('text-decoration-thickness', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('text-decoration-color', value)]
@@ -3936,7 +3925,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('outline-color', value)]
@@ -4068,7 +4057,7 @@ export function createUtilities(theme: Theme) {
           return [decl('font-size', value)]
         }
         default: {
-          value = asColor(value, candidate.modifier, theme)
+          value = asColor(value, candidate.modifier)
           if (value === null) return
 
           return [decl('color', value)]
@@ -4184,7 +4173,7 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'color': {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [
@@ -4280,7 +4269,7 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'color': {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [
@@ -4392,7 +4381,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-ring-color', value)]
@@ -4468,7 +4457,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-inset-ring-color', value)]
@@ -4533,7 +4522,7 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
-            value = asColor(value, candidate.modifier, theme)
+            value = asColor(value, candidate.modifier)
             if (value === null) return
 
             return [decl('--tw-ring-offset-color', value)]