Don't read variables for shadow sizes (#13449)

* Don't read variables for shadow sizes

* Add UI test

* Handle key suffix in get function instead of ThemeKey

* Remove duplicate theme keys

* Format test in a less insane way

* Revert playground changes

* Update changelog

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Enable Vite's `waitForRequestsIdle()` for client requests only ([#13394](https://github.com/tailwindlabs/tailwindcss/pull/13394))
 - Make sure `::first-letter` respectes `::selection` styles ([#13408](https://github.com/tailwindlabs/tailwindcss/pull/13408))
+- Always inline values for `shadow-*` utilities to ensure shadow colors work correctly ([#13449](https://github.com/tailwindlabs/tailwindcss/pull/13449))
 
 ## [4.0.0-alpha.11] - 2024-03-27
 

packages/tailwindcss/src/theme.ts

@@ -42,7 +42,7 @@ export class Theme {
     return keys
   }
 
-  get(themeKeys: ThemeKey[]): string | null {
+  get(themeKeys: (ThemeKey | `${ThemeKey}-${string}`)[]): string | null {
     for (let key of themeKeys) {
       let value = this.values.get(key)
       if (value) {

packages/tailwindcss/src/utilities.test.ts

@@ -11492,8 +11492,8 @@ test('shadow', () => {
     }
 
     .shadow-xl {
-      --tw-shadow: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
-      --tw-shadow-colored: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
+      --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+      --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -11725,8 +11725,8 @@ test('inset-shadow', () => {
     }
 
     .inset-shadow-sm {
-      --tw-inset-shadow: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
-      --tw-inset-shadow-colored: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
+      --tw-inset-shadow: inset 0 1px 1px #0000000d;
+      --tw-inset-shadow-colored: inset 0 1px 1px var(--tw-inset-shadow-color);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 

packages/tailwindcss/src/utilities.ts

@@ -4171,7 +4171,7 @@ export function createUtilities(theme: Theme) {
 
       // Shadow size
       {
-        let value = theme.resolve(candidate.value.value, ['--shadow'])
+        let value = theme.get([`--shadow-${candidate.value.value}`])
         if (value) {
           return [
             boxShadowProperties(),
@@ -4268,7 +4268,8 @@ export function createUtilities(theme: Theme) {
 
       // Shadow size
       {
-        let value = theme.resolve(candidate.value.value, ['--inset-shadow'])
+        let value = theme.get([`--inset-shadow-${candidate.value.value}`])
+
         if (value) {
           return [
             boxShadowProperties(),

packages/tailwindcss/tests/ui.spec.ts

@@ -160,6 +160,35 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
   )
 })
 
+test('shadow colors', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="shadow shadow-red-500"></div>
+      <div id="y" class="shadow-xl shadow-red-500"></div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
+    [
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
+    ].join(', '),
+  )
+  expect(await getPropertyValue('#y', 'box-shadow')).toEqual(
+    [
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+      'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
+    ].join(', '),
+  )
+})
+
 test('outline style is optional', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,