Box Shadow
Box shadows give you a few classes to control very minimal shadows appearing in your layouts.
Box Shadow
shadow(-AMT)
- AMT
none
inner
sm
md
lg
xl
2xl
- AMT
Tailwind has a simple way of adding drop shadows to box elements. There are two special sizes. none, which serves as a reset and inner which places a slight shadow effect inside the box element. It's important to note that you can't make any of the other sizes an inner size.
Then there are the traditional sizes sm
, md
, lg
, xl
and 2xl
. If you just use the keyword shadow without the size, you get a shadow that's 1 pixels wide and 3 pixels to the right. You can see them at work in the example.