Variant Prefixes

Responsive Layouts

Click a breakpoint to see how prefix classes reflow the layout.

Alex Rivera

Frontend Engineer

Sam Chen

Design Systems Lead

Jordan Park

Product Designer

LAYOUT CLASSES

flex flex-col gap-4

Dark Mode

Toggle dark mode — every utility shifts in one class prefix.

Your Dashboard

Pro

Here's a summary of your recent activity. Toggle dark mode to see how every utility class responds.

DARK MODE CLASSES

dark:bg-slate-800 (header zone) dark:bg-slate-900 (body zone) dark:text-white (title) dark:text-slate-400 (body text) dark:border-slate-700 dark:bg-slate-700 dark:text-slate-200 (badge) dark:bg-cyan-600 (button)

STACKED VARIANTS

dark:md:hover:bg-sky-600 dark:md:hover:text-white