Exploring shadow layering

[tcolinpa]

As of v3.4, tailwind doesn't support shadow layering since the box-shadow utility outputs something like this

/* md example */
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

One problem I keep finding while using this is a way to keep consistent shadows and being able to be creative on the fly, without the need to reach out to tailwind.config or/and globals.css. Yes, one simple way is just to use arbitrary values and you're good to go.

However if you want to tokenize these single shadows to then layer and sequence them the way you want is pretty hard.

For sake of convenience, let's say a "shade" is one layer of one "shadow" as in box-shadow: var(--shade-1), var(--shade-2), [...]. One utility could just simply put together all these shades and the order you put is respected on the output, but I got no clue on how to do that and be simplistic and intuitive. Some problems:

• there's no practical way to know how much layers there is on one shadow (is there?)
• how can the layer sequence be guaranteed?

[kaelansmith]

Hi @tcolinpa, I just published a plugin, Tailwind Extended Shadows, that provides utility classes for controlling box-shadow offsets + spread + layers. I opted for auto-generating layers based on the "base" shadow, where you can control how many layers to generate and the scale/multiplier used to calculate each layer's offset & blur values; it also provides shadows-ease-in + shadows-ease-out utilities to adjust the layer scaling math to be more fluid/less linear.

I thought about whether I should expose utilities to control each layer, but decided the auto-generating route provided the best balance of simplicity and best-practice enforcement.

Check out the README (which includes a link to a Demo Playground), and let me know what you think!