Shadows in TailwindCSS
? Shadows in Tailwind CSS
Tailwind provides a set of predefined box-shadow utilities to add shadows to elements, enhancing depth and layering effects.
Common Shadow Classes
| Class | CSS Equivalent | Description |
|---|---|---|
shadow-sm | box-shadow: 0 1px 2px rgba(...) | Small, subtle shadow |
shadow | box-shadow: 0 1px 3px rgba(...) | Default shadow |
shadow-md | Medium shadow | Slightly bigger shadow |
shadow-lg | Large shadow | Bigger, more prominent shadow |
shadow-xl | Extra large shadow | Strong shadow |
shadow-2xl | Extra extra large shadow | Very strong shadow |
shadow-inner | Inner shadow | Shadow inside element |
shadow-none | No shadow | Removes shadow |
Example Usage:
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md"> This card has a medium shadow.</div>Customizing Shadows
You can extend or override shadows in your tailwind.config.js if you want custom shadow styles.
Example:
module.exports = { theme: { extend: { boxShadow: { 'custom-light': '0 2px 4px rgba(0, 0, 0, 0.1)', 'custom-dark': '0 4px 6px rgba(0, 0, 0, 0.6)', } } }}Then use it like:
<div class="shadow-custom-light"> Custom light shadow</div>Responsive and State Variants
You can combine shadows with responsive prefixes and states:
<div class="shadow hover:shadow-lg md:shadow-xl"> Hover to see bigger shadow, larger shadow on medium screens</div>Want me to show you shadow examples on cards or buttons?
