Tailwind CSS·Tailwind from utilities to design system

Responsive design

Use mobile-first breakpoints and container-aware spacing.

Intermediate 12 min read Lesson 6 of 300 Challenge included

What you will be able to do

Start with the base (mobile) classes.
Add md: and lg: for larger layouts.
Use hidden md:block only for genuinely supplementary content.
Test at 360px, 768px and 1280px.

In plain English

Tailwind is mobile-first: an unprefixed utility applies everywhere, and sm:, md:, lg: override from that width up. Design the small screen first, then add the larger layout instead of hiding desktop content.

responsive.htmlHTML

<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <h1 class="text-2xl font-semibold md:text-3xl">Dashboard</h1>
  <button class="rounded-md bg-cyan-600 px-4 py-2 text-white md:ml-auto">New course</button>
</div>

Your turn

Stack on mobile, row on desktop

Easy

Make a container a column by default and a row from md up with a gap of 4.

HTML · starter

<div class="flex">

Check your understanding before moving on.

Knowledge checkQuestion 1

Which utility applies only from the md breakpoint upward?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: States and variants

Lesson 6 of 300 · 0% of course