Add support for “intensity” modifiers on box and text shadows (#17398)

This PR adds support for utilities like:
- `text-shadow-lg/25`

It uses relative color syntax to replace the alpha value of the shadow
from your theme.

When combined with a colors:
- `text-shadow-lg/25 text-shadow-red-500`
- `text-shadow-lg/25 text-shadow-red-500/75`

The alpha values are **multiplied** resulting in a shadow with the color
specified in `--color-red-500` and alpha values of 25% and 18.75%
respectively.

Author: thecrypticace

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `text-shadow-*` utilities ([#17389](https://github.com/tailwindlabs/tailwindcss/pull/17389))
 - Added new `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378))
 - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
+- Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))
 
 ### Fixed
 

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -36,6 +36,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   inherits: false
 }
 
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
 @property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
@@ -47,6 +53,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   inherits: false
 }
 
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
 @property --tw-ring-color {
   syntax: "*";
   inherits: false

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -4672,6 +4672,27 @@ exports[`getClassList 1`] = `
   "inset-ring-transparent/95",
   "inset-ring-transparent/100",
   "inset-shadow",
+  "inset-shadow/0",
+  "inset-shadow/5",
+  "inset-shadow/10",
+  "inset-shadow/15",
+  "inset-shadow/20",
+  "inset-shadow/25",
+  "inset-shadow/30",
+  "inset-shadow/35",
+  "inset-shadow/40",
+  "inset-shadow/45",
+  "inset-shadow/50",
+  "inset-shadow/55",
+  "inset-shadow/60",
+  "inset-shadow/65",
+  "inset-shadow/70",
+  "inset-shadow/75",
+  "inset-shadow/80",
+  "inset-shadow/85",
+  "inset-shadow/90",
+  "inset-shadow/95",
+  "inset-shadow/100",
   "inset-shadow-current",
   "inset-shadow-current/0",
   "inset-shadow-current/5",
@@ -4717,7 +4738,29 @@ exports[`getClassList 1`] = `
   "inset-shadow-inherit/95",
   "inset-shadow-inherit/100",
   "inset-shadow-initial",
+  "inset-shadow-none",
   "inset-shadow-sm",
+  "inset-shadow-sm/0",
+  "inset-shadow-sm/5",
+  "inset-shadow-sm/10",
+  "inset-shadow-sm/15",
+  "inset-shadow-sm/20",
+  "inset-shadow-sm/25",
+  "inset-shadow-sm/30",
+  "inset-shadow-sm/35",
+  "inset-shadow-sm/40",
+  "inset-shadow-sm/45",
+  "inset-shadow-sm/50",
+  "inset-shadow-sm/55",
+  "inset-shadow-sm/60",
+  "inset-shadow-sm/65",
+  "inset-shadow-sm/70",
+  "inset-shadow-sm/75",
+  "inset-shadow-sm/80",
+  "inset-shadow-sm/85",
+  "inset-shadow-sm/90",
+  "inset-shadow-sm/95",
+  "inset-shadow-sm/100",
   "inset-shadow-transparent",
   "inset-shadow-transparent/0",
   "inset-shadow-transparent/5",
@@ -7306,6 +7349,27 @@ exports[`getClassList 1`] = `
   "sepia-50",
   "sepia-100",
   "shadow",
+  "shadow/0",
+  "shadow/5",
+  "shadow/10",
+  "shadow/15",
+  "shadow/20",
+  "shadow/25",
+  "shadow/30",
+  "shadow/35",
+  "shadow/40",
+  "shadow/45",
+  "shadow/50",
+  "shadow/55",
+  "shadow/60",
+  "shadow/65",
+  "shadow/70",
+  "shadow/75",
+  "shadow/80",
+  "shadow/85",
+  "shadow/90",
+  "shadow/95",
+  "shadow/100",
   "shadow-current",
   "shadow-current/0",
   "shadow-current/5",
@@ -7757,6 +7821,27 @@ exports[`getClassList 1`] = `
   "text-pretty",
   "text-right",
   "text-shadow",
+  "text-shadow/0",
+  "text-shadow/5",
+  "text-shadow/10",
+  "text-shadow/15",
+  "text-shadow/20",
+  "text-shadow/25",
+  "text-shadow/30",
+  "text-shadow/35",
+  "text-shadow/40",
+  "text-shadow/45",
+  "text-shadow/50",
+  "text-shadow/55",
+  "text-shadow/60",
+  "text-shadow/65",
+  "text-shadow/70",
+  "text-shadow/75",
+  "text-shadow/80",
+  "text-shadow/85",
+  "text-shadow/90",
+  "text-shadow/95",
+  "text-shadow/100",
   "text-shadow-current",
   "text-shadow-current/0",
   "text-shadow-current/5",

packages/tailwindcss/src/index.test.ts

@@ -1499,6 +1499,12 @@ describe('Parsing theme values from CSS', () => {
         inherits: false
       }
 
+      @property --tw-shadow-alpha {
+        syntax: "<percentage>";
+        inherits: false;
+        initial-value: 100%;
+      }
+
       @property --tw-inset-shadow {
         syntax: "*";
         inherits: false;
@@ -1510,6 +1516,12 @@ describe('Parsing theme values from CSS', () => {
         inherits: false
       }
 
+      @property --tw-inset-shadow-alpha {
+        syntax: "<percentage>";
+        inherits: false;
+        initial-value: 100%;
+      }
+
       @property --tw-ring-color {
         syntax: "*";
         inherits: false