Part 14: Visibility, Opacity & Box Shadow Utilities

Adding depth and elevation through box shadows and opacity makes user interfaces look modern and polished.

1. The Shadow Scale (Elevation)

Tailwind provides carefully crafted shadow presets: - shadow-sm: Subtle elevation (inputs, buttons). - shadow: Default card elevation. - shadow-md: Hover states, dropdowns. - shadow-lg: Modals, floating action buttons. - shadow-xl: Feature cards. - shadow-2xl: High-elevation dialogs. - shadow-none: Removes shadows.

2. Interactive Shadow Lift on Hover

<div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-xl transition-shadow duration-300 border border-slate-100 cursor-pointer">
  <h3 class="font-bold text-lg">Interactive Card</h3>
  <p class="text-slate-500 mt-2">Notice the smooth shadow elevation when hovering.</p>
</div>

3. Colored Glow Shadows

In modern Tailwind, you can tint shadows using brand colors:

<button class="px-6 py-3 bg-indigo-600 text-white font-bold rounded-lg shadow-lg shadow-indigo-500/50 hover:bg-indigo-700 transition">
  Purchase Now
</button>

4. Opacity Modifiers

• opacity-50: Sets element opacity to 0.5.
• Color opacity slash notation: bg-black/40 or text-slate-900/70.

Key Takeaways

• Use standard shadow steps to establish a consistent elevation hierarchy.
• Use colored shadows (shadow-indigo-500/40) to create glowing call-to-action buttons.

In Part 15, we enter Module 3 to master Modern Flexbox Architecture!