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.