|
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.
|
