extend shadow to include direction e.g.. shadow-direction-size etc.

[jayenne]

Hi is there or would it be desirable to have a extension?

I realise the shadow direction is a seldom used effect but being able to shadow-t-lg would be nice.

For example:
shadow-t-sm
shadow-r-md
shadow-b-lg
shadow-l-xl

[alexanderbluhm]

@jayenne Your idea is nice. However, there are tons of utilities which could have a lot more options but this would increase the bundle size a lot. The shadow utility is a very good example where users can extend their custom tailwind config to unlock things like shadow-t-sm. That's also why on every utility there is a detailed docu on how to extend it.

If you are interested you could make a shadow-plugin which provides top,left, ... and maybe also different colors?
I think there are already some shadow plugins which could be used for inspiration.

[esculturajerome]

Thanks for this!

[srph]

Thank you good person!

[KassemHachi]

thanks a lot !!

[f1ndev]

boxShadow: {
  't-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
  't-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  't-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  't-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  't-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
  't-3xl': '0 -35px 60px -15px rgba(0, 0, 0, 0.3)',
  'b-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  'b-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06)',
  'b-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05)',
  'b-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04)',
  'b-2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  'b-3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
  'l-sm': '-1px 0 2px 0 rgba(0, 0, 0, 0.05)',
  'l-md': '-4px 0 6px -1px rgba(0, 0, 0, 0.1), 2px 0 4px -1px rgba(0, 0, 0, 0.06)',
  'l-lg': '-10px 0 15px -3px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.05)',
  'l-xl': '-20px 0 25px -5px rgba(0, 0, 0, 0.1), 10px 0 10px -5px rgba(0, 0, 0, 0.04)',
  'l-2xl': '-25px 0 50px -12px rgba(0, 0, 0, 0.25)',
  'l-3xl': '-35px 0 60px -15px rgba(0, 0, 0, 0.3)',
  'r-sm': '1px 0 2px 0 rgba(0, 0, 0, 0.05)',
  'r-md': '4px 0 6px -1px rgba(0, 0, 0, 0.1), -2px 0 4px -1px rgba(0, 0, 0, 0.06)',
  'r-lg': '10px 0 15px -3px rgba(0, 0, 0, 0.1), -4px 0 6px -2px rgba(0, 0, 0, 0.05)',
  'r-xl': '20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)',
  'r-2xl': '25px 0 50px -12px rgba(0, 0, 0, 0.25)',
  'r-3xl': '35px 0 60px -15px rgba(0, 0, 0, 0.3)',
  'all-sm': '0 0 2px 0 rgba(0, 0, 0, 0.05)',
  'all-md': '0 0 6px -1px rgba(0, 0, 0, 0.1), 0 0 4px -1px rgba(0, 0, 0, 0.06)',
  'all-lg': '0 0 15px -3px rgba(0, 0, 0, 0.1), 0 0 6px -2px rgba(0, 0, 0, 0.05)',
  'all-xl': '0 0 25px -5px rgba(0, 0, 0, 0.1), 0 0 10px -5px rgba(0, 0, 0, 0.04)',
  'all-2xl': '0 0 50px -12px rgba(0, 0, 0, 0.25)',
  'all-3xl': '0 0 60px -15px rgba(0, 0, 0, 0.3)'
},

[seru-codes]

Latest as of tailwindcss: 4.3.2:

@theme {
  --shadow-t-sm: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-t-md: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-t-lg: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-t-xl: 0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-t-2xl: 0 -25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-t-3xl: 0 -35px 60px -15px rgba(0, 0, 0, 0.3);
  --shadow-b-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-b-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-b-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-b-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-b-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-b-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
  --shadow-l-sm: -1px 0 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-l-md: -4px 0 6px -1px rgba(0, 0, 0, 0.1), 2px 0 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-l-lg: -10px 0 15px -3px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-l-xl: -20px 0 25px -5px rgba(0, 0, 0, 0.1), 10px 0 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-l-2xl: -25px 0 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-l-3xl: -35px 0 60px -15px rgba(0, 0, 0, 0.3);
  --shadow-r-sm: 1px 0 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-r-md: 4px 0 6px -1px rgba(0, 0, 0, 0.1), -2px 0 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-r-lg: 10px 0 15px -3px rgba(0, 0, 0, 0.1), -4px 0 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-r-xl: 20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-r-2xl: 25px 0 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-r-3xl: 35px 0 60px -15px rgba(0, 0, 0, 0.3);
  --shadow-all-sm: 0 0 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-all-md: 0 0 6px -1px rgba(0, 0, 0, 0.1), 0 0 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-all-lg: 0 0 15px -3px rgba(0, 0, 0, 0.1), 0 0 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-all-xl: 0 0 25px -5px rgba(0, 0, 0, 0.1), 0 0 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-all-2xl: 0 0 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-all-3xl: 0 0 60px -15px rgba(0, 0, 0, 0.3);
}

[dsebastien]

Hasn't this become less impactful for bundle size now that we have the JIT mode?

[yxor]

Since we have JIT mode now please consider adding this.

[officialabdulrehman]

Can we have this ? since many of us manually add the required classes, it seems to be pretty common usecase.

[Jkan1]

Do we now have an open shadow-plugin for Tailwind to handle this ?

[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