How to add Shadows to Elements in Tailwind CSS ?

Adding shadows to elements in Tailwind CSS is done using utility classes like shadow-sm, shadow-md, and shadow-lg to apply different levels of box shadows. Additionally, you can use the hover:shadow-[size] class for a hover effect with shadows.

Preview

Syntax

<div class="shadow-* ">
      This element has a medium box shadow.
</div>

Here, the Star mark(*) represent the different ranges of sizes, whichare small(sm), medium(md), large(lg), and extra large(2xl).

Below table illustrates the classes alongside their corresponding descriptions.

Class	Description
shadow-*	Adds a box shadow to the element. Replace * with sm (small), md (medium), lg (large), or customize the shadow in the configuration file.
hover:shadow-*	Applies a box shadow on hover, providing an interactive effect. Replace * as mentioned above to customize the hover box shadow.

Key Features

• Shadow Levels: Tailwind provides different shadow levels (sm, md, lg) for quick and consistent styling.
• Customization: Customize box shadows by adjusting the configuration file to match project-specific design requirements.
• Hover Effect: Use hover:shadow-[size] for adding shadows specifically on hover, enhancing user interactivity.
• Responsive Design: Utilize responsive variants (sm:, md:, lg:, xl:) for adapting shadow styles based on different screen sizes.