Tailwind CSS v4: How to set default boxShadowColor like in v3?

[AlexejLiebenthal]

How can I set a default boxShadowColor (e.g. #ef4444) in Tailwind CSS v4, equivalent to this v3 config?

extend: {
  boxShadowColor: {
    DEFAULT: '#ef4444',
  },
}

I've tried setting --tw-shadow-color inside @theme and :root, but it didn't work.

What's the correct approach in v4?

Tailwind v3: https://play.tailwindcss.com/ozEo3jUj2F

[wongjn]

I don't think there is an individual variable to only affect the color of built-in shadows:

tailwindcss/packages/tailwindcss/theme.css

Lines 358 to 384 in adcf1de

	--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
	--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
	--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
	--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
	--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
	--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
	--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
	--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
	--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
	--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
	--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
	--text-shadow-sm:
	0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
	--text-shadow-md:
	0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
	--text-shadow-lg:
	0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);

So you'd have to copy-paste these into your own @theme: https://play.tailwindcss.com/k7Dvki13Wt?file=css. Also, shadow is a deprecated class name, with the v4 equivalent being shadow-sm.

[AlexejLiebenthal]

Thanks @wongjn, this is exactly what I was looking for :)