how to apply inset to box shadow in tailwindcss?

Question

Tailwindcss docs (v3) 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? or how can I define a custom one in the tailwind.config.js file?

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)