Remove named opacity support for color opacity modifiers (#14278)

Right now if you have a custom opacity theme value configured like this…

```css
@theme {
  --opacity-disabled: 50%;
}
```

…then you can use that named opacity value as a color opacity modifier
like this:

```html
<div class="bg-red-500/disabled">
```

We think this behavior is confusing. The color opacity modifier is not
setting opacity but the alpha value of a color. Opacity is for setting
the opacity of an element, so the custom names you'd come up with are
named after those situations, which makes them not seem appropriate for
color modifiers.

Author: philipp-spiess

CHANGELOG.md

@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265))
 - Support bare values when using `tailwindcss/defaultTheme` ([#14257](https://github.com/tailwindlabs/tailwindcss/pull/14257))
 
+## 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)]