Backgrounds and Borders
Box Shadow
Shadows add depth and hierarchy. Tailwind offers a set of preset shadows from shadow-sm to shadow-2xl, plus rings for focus states.
Elevation with shadow-*
Example
<div class="flex gap-4 flex-wrap">
<div class="bg-white p-6 rounded-xl shadow-sm">shadow-sm</div>
<div class="bg-white p-6 rounded-xl shadow-md">shadow-md</div>
<div class="bg-white p-6 rounded-xl shadow-xl">shadow-xl</div>
</div>Rings for focus
ring-* draws an outline-like ring, most often used with focus: for accessible focus states.
Example
<button class="bg-sky-600 text-white px-5 py-2.5 rounded-lg focus:outline-none focus:ring-4 focus:ring-sky-300">
Focus me
</button>💡
Add hover:shadow-lg with transition to make cards lift on hover — a popular, subtle effect.