Module 5 / Effects & responsive design
← M4M6 →
Module 5 · Beyond the basics

Effects & responsive design

Shadows, opacity, filters for visual depth — and the responsive prefix system that makes layouts adapt.

0/3 lessons

Shadows, opacity & filters

Learn

Tailwind's box-shadow scale gives you consistent depth: `shadow-sm` (subtle), `shadow` (standard), `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`. Pair with a color using `shadow-<color>/<opacity>` like `shadow-indigo-500/25`.

Opacity is a single `opacity-*` utility (0→100 in steps of 5). For background-only transparency, use the `/NN` suffix on color utilities: `bg-black/50` for 50% black background WITHOUT affecting text opacity. `backdrop-blur-sm` (or `md`, `lg`, `xl`) adds the frosted-glass effect behind an element.

shadow-sm

A tiny lift — great for cards on light backgrounds where heavy shadows feel aggressive.

shadow-md → shadow-lg

Standard depth for cards and modals. shadow-lg is the workhorse for elevated surfaces.

shadow-2xl

Heaviest default shadow — for modals, drawers, and floating panels that need clear separation.

opacity-*

0→100, affects the WHOLE element. Prefer bg-black/50 over opacity-50 to keep text sharp.

backdrop-blur

Frosted glass. Requires a semi-transparent bg (bg-white/70) on the same element.

Practice
Loading…
Recall0/1
Recall

Why use `bg-black/50` instead of `bg-black opacity-50` for a semi-transparent background?

Responsive breakpoints

Learn

Tailwind's responsive system is a prefix, not a new syntax. Prefix any utility with a breakpoint and it applies at that screen width and above (mobile-first). `md:flex` means 'display: flex on md screens and up'. No media queries to write — the prefix IS the media query.

The default breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px). You can stack multiple on one element: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3` creates a 1→2→3 column responsive grid.

Mobile-first: base classes = mobile, then add prefixes for larger screens. class="text-sm md:text-base lg:text-lg" → sm on mobile, base at 768px+, lg at 1024px+ class="flex-col md:flex-row" → stacked on mobile, side-by-side at 768px+
The mental model: write for mobile FIRST (the base, un-prefixed classes), then add prefixed overrides as the screen grows. You're layering complexity onto a simple mobile base, not stripping it away.
Practice
Loading…
Recall0/1
Recall

A class like `md:grid-cols-2` applies at screen widths…

Dark mode

Learn

The `dark:` variant works exactly like responsive prefixes: prefix any utility with `dark:` and it applies only when the user's system (or your app) is in dark mode. `dark:bg-slate-800` overrides the background when dark mode is active.

The common pattern: set light-mode classes as the base, then add `dark:` overrides. `bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100` — one element, two color schemes, no JavaScript media query.

Light mode (base)

Background
bg-white
Text
text-slate-900
Border
border-slate-200
Card
bg-slate-50

Dark mode (dark: prefix)

Background
dark:bg-slate-950
Text
dark:text-slate-100
Border
dark:border-slate-800
Card
dark:bg-slate-900
v4's dark mode defaults to the 'media' strategy (follows the OS preference). Switch to 'selector' in your CSS if you need a manual toggle — then dark: utilities respond when a parent has the 'dark' class.
Practice
Loading…
Recall0/1
Recall

Given `bg-white dark:bg-slate-900`, what background color applies in dark mode?