Tailwind CSS - lesson 4 | HackIndia Skills

Key point

Mobile first

Write the base classes for a small phone screen. Then add breakpoint prefixes for tablets and laptops.

In Tailwind, md:grid-cols-2 means “use 2 columns from the md width and up.” The unprefixed class is the default.

Why it matters

Recruiters and judges often open your project on a phone first. Your page should not need pinching, sideways scrolling, or tiny buttons.

A finished page usually has one column on mobile, more space on tablet, and a wider layout on laptop.

Your to-do

Set the viewport

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open index.html in your Vite app.
Check that the head includes the viewport meta tag.
Add it if it is missing.
Reload the page before testing responsive styles.

0 of 4 done

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Example

Responsive card grid

This layout is safe for a hackathon project page. It starts as one column, becomes two on medium screens, and three on large screens.

Use the same pattern for features, team members, startup ideas, events, or dashboard cards.

<section className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
  <div className="mb-6 max-w-2xl">
    <p className="text-sm font-medium text-blue-600">Campus payments</p>
    <h1 className="mt-2 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
      Split canteen bills without confusion
    </h1>
    <p className="mt-3 text-base text-slate-600 sm:text-lg">
      Track who paid, who owes, and settle later with UPI.
    </p>
  </div>

  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="font-semibold text-slate-950">Add expenses</h2>
      <p className="mt-2 text-sm text-slate-600">Log chai, snacks, printing, or cab costs.</p>
    </div>
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="font-semibold text-slate-950">See balances</h2>
      <p className="mt-2 text-sm text-slate-600">Know who owes what before leaving campus.</p>
    </div>
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:col-span-2 lg:col-span-1">
      <h2 className="font-semibold text-slate-950">Settle later</h2>
      <p className="mt-2 text-sm text-slate-600">Keep a clean record for your group.</p>
    </div>
  </div>
</section>

Common mistake

Do not stack breakpoints

Beginners add sm:, md:, and lg: to everything. That makes classes noisy and hard to fix.

Only add a breakpoint when something changes. If text-slate-600 works everywhere, keep it unprefixed.

Tip

Test four widths

Use browser dev tools and test around phone, tablet, laptop, and wide desktop sizes. Tailwind’s default breakpoints include sm at 640px, md at 768px, lg at 1024px, xl at 1280px, and 2xl at 1536px.

You do not need a class for every breakpoint. Most student projects look finished with base, sm, md, and lg.

Tip

Use AI carefully

Ask AI to convert a desktop-only section into a mobile-first Tailwind layout. Then check three things yourself: no horizontal scroll, tap targets are not cramped, and the class list has only needed breakpoint prefixes.

If AI gives old Tailwind setup code with @tailwind base, @tailwind components, and @tailwind utilities, do not copy it for v4. Your CSS entry should use @import "tailwindcss".