How to add Shadows to Elements in Tailwind CSS ?
Last Updated :
07 Feb, 2024
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.
Share your thoughts in the comments
Please Login to comment...