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

Docs Try it

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.