How do I add a box shadow in Tailwind CSS?

Use one of the shadow utilities such as shadow-sm, shadow-md, shadow-lg or shadow-2xl. For a value Tailwind does not ship, use an arbitrary value like shadow-[0_2px_8px_rgba(0,0,0,0.12)], which is what this generator outputs.

Can I use a custom box shadow with Tailwind?

Yes. Either pass an arbitrary value in square brackets directly in the class, or add a named entry under theme.extend.boxShadow in your Tailwind config so you can reuse it as a utility across the project.

What makes a box shadow look realistic?

Layer two or three shadows with different blur radii rather than using one large blur, and keep the colour a transparent dark tone rather than pure black. Real light produces a tight contact shadow plus a wider ambient one.

Do box shadows hurt performance?

Static shadows are cheap. Animating box-shadow is not, because it forces a repaint on every frame. If you need a shadow to change on hover, animate the opacity of a pseudo-element that carries the larger shadow instead.