Feature Request: More shadow utilities / classes

[UltraCakeBakery]

In my projects I use a healthy amount of dynamic shadows. I always add our own presets as the current defaults are lacking options related to color, inset/outset, blur, spread, offset and more. I think many users of tailwind could appreciate better out-of-the-box shadow options.

Here is the set of classes I want to propose;

Classes
shadow : base class, like border and transform
shadow-inner : alternative base class. Adds the inset option to the final box-shadow (already exists kinda)
shadow-both : alternative base class. Generates both a inset and outset shadow from all given values.
shadow-<color>-<saturation> : basically the shadow version of bg-red-500
shadow-x-<distance>: as many as there are translate-x-<distance> distances
shadow-y-<distance>: as many as there are translate-y-<distance> distances
shadow-blur-<blur>: softest, soft, normal, harder, hard
shadow-spread-<size>: as many as there are translate-x/y-<distance> distances

Alternatives:

1. We could keep shadow-sm but allow the other classes to be added as modifiers.

2. Add another base class called 'shadow-custom' which is required for the other options to take effect.
   You could then still create the same shadows we have now by just doing shadow shadow-soft instead of shadow-sm.

3. Shortening shadow to sh could also be an option to save space.
   Maybe we could then also add tsh for text-shadows while we're at it.

4. Maybe a combination of all of the above?

Examples
Here is a full example using all classes. Please ignore all thoughts about how ugly this input is with my values. Instead, think about how nice it would look with your values.

<input class="bg-white shadow-inner shadow-green-50 shadow-x-2 shadow-y-3 shadow-blur-hard shadow-spread-1 focus:shadow-x-3 focus:shadow-y-4">

using sh instead of shadow:
<input class="bg-white sh-inner sh-green-50 sh-x-2 sh-y-3 sh-blur-hard sh-spread-1 sh-x-3 focus:sh-y-4">

using shw instead of shadow:
<input class="bg-white shw-inner shw-green-50 shw-x-2 shw-y-3 shw-blur-hard shw-spread-1 shw-x-3 focus:shw-y-4">

Final thoughts
In my eyes this is just another thing that could be made easier to do with tailwind. Shadows are the large majority of my custom configs and contents of all <style> tags. Every time I have to add something to my config it feels like a loss. Having this work out of the box would be amazing.

I do understand that this, depending on the implementation and how tailwind generates variants under the hood, could increase the total size of tailwind a lot. If that is the case this might be better off as a plugin or separated utility.

[UltraCakeBakery]

The issue shows more people would like something like this (scroll down for all the upvotes)
#654

My proposal would also make this easier to achieve:
#3177

[kaelansmith]

I just published a Tailwind plugin that elegantly solves this, called tailwind-extended-shadows; it adds utilities for specifying box-shadow x + y offsets (i.e. directions), and shadow spread. They work alongside the built-in shadow-{size} (controls blur) and shadow-{color} classes, so you have full control over your shadows via utility classes.

For example:

<div class="shadow-lg shadow-slate-900/20 shadow-b-2 shadow-r-[3px] -shadow-spread-2">...</div>

Github: https://github.com/kaelansmith/tailwind-extended-shadows
Playground: https://play.tailwindcss.com/9X5nqVNd1d