[v4-beta.9] Create Custom Box Shadows

[allenwyma]

What version of Tailwind CSS are you using?

v4 beta 9

What build tool (or framework if it abstracts the build tool) are you using?

cli

What version of Node.js are you using?

no node

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

@import "tailwindcss";
@theme {

  /* Box Shadows */
  --shadow-xs: 0px 1px 2px 0px rgba(38, 38, 38, 0.05), 0px 1px 2px 0px rgba(38, 38, 38, 0.04);
  --shadow-sm: 0px 2px 6px 0px rgba(38, 38, 38, 0.06);
  --shadow-md: 0px 6px 15px -2px rgba(38, 38, 38, 0.08), 0px 6px 15px -2px rgba(38, 38, 38, 0.08);
  --shadow-lg: 0px 8px 24px -3px rgba(38, 38, 38, 0.10), 0px 8px 24px -3px rgba(38, 38, 38, 0.05);
  --shadow-xl: 0px 20px 40px -8px rgba(38, 38, 38, 0.10), 0px 20px 40px -8px rgba(38, 38, 38, 0.05);
  --shadow-xxl: 0px 25px 60px -15px rgba(38, 38, 38, 0.20), 0px 25px 60px -15px rgba(38, 38, 38, 0.12);
}

Describe your issue

Box shadow isn't replacing the current class, I'd like to override to the above directly and use this instead of using the different parts.

[adamwathan]

Looks like it's working to me? Those are your custom values.

Here's a Play with a more extreme/obvious custom shadow to show it's working:

https://play.tailwindcss.com/VSkV20tl4w?file=css