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.