In Tailwind CSS, you can apply box shadows using the shadow utilities. In this section, we will explore how to use box shadows in Tailwind CSS. We will cover shadow sizes, custom shadows, Tailwind shadow sizes, shadow buttons, and provide an example of a card with a shadow using Tailwind CSS.
Tailwind CSS Box Shadow Example
Tailwind shadow utilities include sizes such as shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl.
<div class="p-6 shadow-md">Shadow-md</div>
<div class="p-6 shadow-lg">Shadow-lg</div>
<div class="p-6 shadow-xl">Shadow-xl</div>
<div class="p-6 shadow-2xl">Shadow-2xl</div>
Use the Tailwind CSS class shadow-inner to apply an inner box shadow.
<div class="p-6 shadow-inner">shadow-inner</div>
.shadow-none use for removing shadow effect.
<div class="p-4 shadow-none">shadow-none</div>tailwind using shadow with hover class.
<div class="p-4 shadow hover:shadow-lg">Shadow hover</div>Tailwind CSS shadow button with shadow effect.
<button class="px-4 py-2 rounded shadow bg-blue-400 hover:shadow-lg text-blue-100">Button</button>
Create responsive shadow box.
<div class="p-4 shadow lg:shadow-lg md:shadow-md">Responsive Shadow</div>Tailwind CSS custom shadow arbitrary values.
<div class="p-4 shadow-[0px_0px_3px_rgba(3,102,214,0.3)]">Custom Shadow</div>
<div class="p-4 shadow-[0px_22px_70px_4px_rgba(0,0,0,0.56)]">Custom Shadow</div>
Tailwind CSS card with shadow.
<div class="w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md lg:max-w-md">
<h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Tailwind CSS Card with Shadow</h2>
<p class="mb-3 font-normal text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quasi autem
accusamus odio minima fugiat, consectetur recusandae assumenda.</p>
<a href="#"
class="inline-flex items-center rounded-lg bg-purple-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-purple-800 focus:outline-none">
Read more </a>
</div>