How to apply inset to shadow utility?

Question

TailwindCSS Docs talk about inset box shadow so briefly that I couldn't find out a way to apply a custom inset box-shadow to an element.

Also shadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)] does not work.

Only the default shadow-inner works on the element Is there a way to apply a custom shadow-inner to an element?

Answer 1

When using arbitrary values in brackets, Tailwind converts the arbitrary value directly to a CSS property, replacing underscores with spaces. So, to define an arbitrary inset box shadow, we can simply use:

shadow-[inset_0_-2px_4px_rgba(0,0,0,0.6)]

This will become the CSS property:

box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.6)