[Feature proposal] Shadow colors

[royvanv]

Instead of only black shadows, it would be nice to add some color to our shadows. This issue applies to box-shadow and in the future perhaps also text-shadow.

Here's a code example (using abritrary values):

:root {
  --shadow-color: rgba(0, 0, 0, 0.5);  
  --shadow-size: 0 0 10px;
}

.shadow {
  box-shadow: var(--shadow-size) var(--shadow-color);
}

.shadow-lg {
  --shadow-size: 5px 5px 15px;
}

.shadow-white {
  --shadow-color: white;  
}

Unfortunately this would a breaking change in v1(.2), because the different shadow size would require the shadow to be added.

[ghost]

How will this work with multiple shadows?

The box shadow syntax is not limited to one effect, this is a list of effects:

boxShadow: {
  default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
},

[royvanv]

How will this work with multiple shadows?

It will not, I guess. At least not in clean way.

[lemcii]

0 1px 3px 0 rgba(var(--shadow-color), 0.1) rgba(var(--shadow-color), 0.06);

Something like this?

[royvanv]

That is actually stupidly simple, @lemcii! 😅

[royvanv]

I have tested the default Tailwind palette (excluding transparent and current) with the solution @lemcii provided. The alpha used for the default black shadow is too low for it show other colors properly. On black the shadows are barely even noticeable, even when using white.

I am also realizing that it does not make sense to have 9 shadow shades per color. Using one shade per color should be sufficient. For .shadow-outline using the proposed CSS variable feels like a great solution.

This CSS could be used to define custom box shadow opacities per color:

.shadow-lg {
    --shadow-color: 0, 0, 0;
    --shadow-opacity: 0.1;
    box-shadow: 0 10px 15px -3px rgba(var(--shadow-color), var(--shadow-opacity)),
        0 4px 6px -2px rgba(var(--shadow-color), calc(var(--shadow-opacity) * 0.5));
}