Tailwind CSS - lesson 2 | HackIndia Skills

Key point

One scale wins

Finished pages do not use random spacing. They repeat a small set of gaps, padding, and text sizes so the page feels planned.

In Tailwind, utilities like p-4, gap-6, mt-8, text-sm, text-xl, and font-semibold come from design-token scales. In v4, spacing utilities are driven by theme variables like --spacing-*.

Why it matters

A hackathon app can work well but still look unfinished if every card has a different gap. Recruiters notice messy spacing before they read your code.

Your goal is not to decorate. Your goal is to make scanning easy on a phone, a laptop, and a projector during demos.

Your to-do

Pick a spacing rhythm

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.

Use p-4 for compact sections and p-6 for important cards.
Use gap-3 or gap-4 inside small groups like buttons and form fields.
Use gap-6 or gap-8 between major blocks like hero, features, and footer.
Use mt-2 for helper text, mt-4 for related content, and mt-8 for new sections.
Avoid mixing many values unless there is a clear reason.

0 of 5 done

Your to-do

Set type levels

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.

Use text-xs or text-sm for labels, tags, and helper text.
Use text-base for normal body text.
Use text-lg or text-xl for card headings.
Use text-3xl or text-4xl for the main page title.
Pair size with weight, such as font-medium for labels and font-bold for the main title.

0 of 5 done

Example

Before and after

This example turns a plain project card into something that feels consistent. Notice how spacing and type repeat instead of changing randomly.

export default function ProjectCard() {
  return (
    <section className="mx-auto max-w-3xl p-6">
      <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <p className="text-sm font-medium text-slate-500">HackIndia submission</p>

        <h1 className="mt-2 text-3xl font-bold tracking-tight text-slate-950">
          Campus Expense Splitter
        </h1>

        <p className="mt-4 text-base leading-7 text-slate-600">
          Split mess bills, trip costs, and room expenses with UPI-ready summaries.
        </p>

        <div className="mt-6 flex gap-3">
          <button className="rounded-xl bg-slate-950 px-4 py-2 text-sm font-semibold text-white">
            View demo
          </button>
          <button className="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-900">
            GitHub repo
          </button>
        </div>
      </div>
    </section>
  );
}

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to clean up spacing and typography in a component. Paste the JSX and ask it to use a consistent Tailwind scale.

Check that it does not add custom CSS for simple spacing. Check that it keeps the page readable and does not return huge class strings with ten different text sizes.

Prompt:
Clean up the spacing and typography in this React component using Tailwind CSS utilities.
Use a small repeated scale for padding, margin, gap, and text sizes.
Do not change the component logic.
Explain the spacing choices after the code.

Common mistake

Do not use margin to fix every small visual problem. If the whole section feels cramped, change the parent padding or gap first.

Also avoid arbitrary values too early, like mt-[17px]. They make the page harder to maintain unless you are matching a strict design.

Your to-do

Do this now

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 one important page in your Vite app.
Choose three spacing values you will reuse, such as p-4, p-6, and gap-6.
Set one main title, one card heading, one body style, and one label style.
Replace random margins with parent padding or gap where possible.
Commit the change with a clear message like style spacing and type scale.

0 of 5 done

Use spacing and type scales

One scale wins

Why it matters

Pick a spacing rhythm

Set type levels

Before and after

Use AI carefully

Common mistake

Do this now

Quick check