JSTAcademy
0 XP
Dashboard
Crash Courses
Responsive Design
10 min
Basic+150 XP
Crash Courses · Basic

Responsive Design

Build mobile-first layouts using Tailwind's responsive prefixes.
10 min read+150 XP on completionCert: Tailwind CSS Crash Course
Tap any word in the text below to start reading from there.

Responsive Design

Tailwind is mobile-first. Unprefixed classes apply everywhere. Prefixed classes kick in at the breakpoint and above.

Breakpoints

// sm: ≥640px  md: ≥768px  lg: ≥1024px  xl: ≥1280px  2xl: ≥1536px

<h1 className="text-2xl md:text-4xl lg:text-5xl">
  JST Academy
</h1>

<div className="flex flex-col md:flex-row gap-6">
  <Sidebar className="w-full md:w-64" />
  <main className="flex-1">...</main>
</div>

Responsive Grid

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {courses.map(c => <CourseCard key={c.id} course={c} />)}
</div>

Show/Hide by Breakpoint

{/* Mobile-only */}
<nav className="flex md:hidden">
  <MobileMenu />
</nav>

{/* Desktop-only */}
<nav className="hidden md:flex items-center gap-6">
  <DesktopNav />
</nav>

{/* Adjust padding responsively */}
<section className="px-4 md:px-8 lg:px-16 py-8 md:py-16">

Responsive Typography

<h1 className="
  text-3xl font-bold
  sm:text-4xl
  lg:text-5xl
  tracking-tight
  text-gray-900
">
  Build Real Apps
</h1>

<p className="
  text-base leading-relaxed
  md:text-lg
  max-w-2xl
  text-gray-600
">
  PhD-level crash courses for full-stack developers.
</p>
0%