5

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?

Ali Baghban
  • 517
  • 1
  • 5
  • 13

1 Answers1

16

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)

Nate Norris
  • 836
  • 7
  • 14
  • one thing to note, make sure there are zero spaces. my setup wasn't working and I realized i had spaces between the commas. once i got rid of them it worked perfectly. – Mix Master Mike May 12 '23 at 23:09