Tailwind CSS

Lesson 02

Responsive breakpoints

Use Tailwind breakpoints as mobile-first overrides instead of locking layouts to a desktop width.

Good Code

LessonGrid.tsx
export function LessonGrid({ lessons }: { lessons: Lesson[] }) {
  return (
    <section className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {lessons.map((lesson) => (
          <a key={lesson.slug} href={lesson.href} className="rounded-md border border-slate-200 p-4 hover:border-sky-400">
            {lesson.title}
          </a>
        ))}
      </div>
    </section>
  );
}

Bad Code

LessonGrid.tsx
export function LessonGrid({ lessons }) {
  return (
    <section className="mx-auto w-[960px] px-[32px] py-[40px]">
      <div className="grid grid-cols-3 gap-[18px]">
        {lessons.map((lesson) => (
          <a key={lesson.slug} href={lesson.href} className="rounded-md border p-4">
            {lesson.title}
          </a>
        ))}
      </div>
    </section>
  );
}

Review Notes

What to review

Good Code

The good version starts with one column and adds columns at sm and lg, while the container uses flexible width with a maximum.

Bad Code

The bad version fixes a desktop width and column count. On smaller screens, the layout is forced to overflow or shrink in ways the code does not explain.

Takeaways

  • Responsive utilities should describe how a small-screen layout grows, not how a large layout is squeezed down.