Tailwind CSS - lesson 2 | HackIndia Skills

Tailwind CSS - lesson 2 | HackIndia Skills | HackIndia

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.

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