Responsive Design

Tailwind · Reference cheat sheet

📋 Overview

Tailwind uses mobile-first breakpoint variants. Unprefixed utilities apply from 0 up; md: and larger override at that minimum width.

🔧 Core concepts

💡 Examples

Stack → row:

<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <nav class="w-full md:w-64">Nav</nav>
  <main class="flex-1">Content</main>
</div>

Responsive type:

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">Headline</h1>

Hide on small screens:

<aside class="hidden lg:block">Desktop sidebar</aside>

⚠️ Pitfalls

• Thinking desktop-first and writing md: as “mobile only” — it's min-width.
• Custom breakpoints must be extended in theme config to stay consistent.
• Container queries use @min-* / @max-* variants when enabled — different from viewport breakpoints.

🔗 Related

• layout_flex_grid.md
• utility_classes.md
• custom_config.md
• dark_mode.md