Responsive Patterns

Tailwind CSS uses a mobile-first breakpoint system. Styles without a prefix apply to all screen sizes; prefixed styles apply at that breakpoint and above.

Breakpoints

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- cards -->
</div>

Mobile-first approach

Always start with the smallest screen and layer on complexity. This keeps mobile styles simple and prevents overriding large amounts of CSS at smaller sizes.

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

The heading starts at text-2xl, grows to text-4xl on tablets, and reaches text-5xl on laptops and above.

Responsive sidebar

The sidebar-08 variant collapses to an overlay on mobile and stays fixed on desktop. Control this with the SidebarProvider and its open state.

<SidebarProvider>
  <Sidebar className="hidden lg:flex">
    <SidebarContent>{/* nav items */}</SidebarContent>
  </Sidebar>
  <main className="flex-1">{children}</main>
</SidebarProvider>

On screens below lg, a hamburger button triggers the sidebar as a slide-over panel.

Grid layouts

Common grid patterns used across the project:

{/* Two-column feature grid */}
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
  <FeatureCard />
  <FeatureCard />
</div>

{/* Three-column card grid with max width */}
<div className="mx-auto max-w-6xl grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <Card />
  <Card />
  <Card />
</div>

Typography scaling

Use Tailwind's text- utilities with breakpoint prefixes to scale type smoothly.

Tips

• Use container mx-auto px-4 for consistent page margins.
• Prefer gap-* over margins between grid/flex children.
• Test layouts at 320px, 768px, and 1280px to catch common issues.