All the reading

Tailwind CSS

7 lessons, about 30 minutes. The check's questions come from these.

Using utility classes directly

1. Think in utility classes

4 min

Key point

One idea

Tailwind means you style the element where you write it. Instead of naming something .project-card and jumping to a CSS file, you add small utility classes like p-4, rounded-xl, and text-slate-900 on the element itself.

Why this helps

Hackathon pages often work but look unfinished. Utility classes help you make quick, visible improvements without stopping to invent class names.

You still need design sense. Tailwind does not choose spacing, type, or layout for you. It gives you a shared set of tokens so your page feels consistent.

Example

Old CSS habit

This works, but you split one visual idea across two places. On a small project, that slows you down.

// App.jsx
export default function App() {
  return <section className="project-card">UPI Splitter</section>;
}

// style.css
.project-card {
  padding: 16px;
  border-radius: 12px;
  background: white;
  color: #0f172a;
}

Example

Tailwind habit

Now the styling is attached to the section. You can scan the element and understand its spacing, shape, colour, and text treatment.

export default function App() {
  return (
    <section className="rounded-xl bg-white p-4 text-slate-900 shadow-sm">
      UPI Splitter
    </section>
  );
}

Your to-do

2. Use spacing and type scales

5 min

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

6. Keep classes readable

4 min

Key point

One rule

Readable Tailwind is not fewer classes at any cost. It is classes ordered in a way you and your teammate can scan quickly.

Put layout first, then spacing, then size, type, color, effects, and finally variants like hover:, md:, and dark:.

Why it matters

In a hackathon repo, recruiters and judges may open one component file for 20 seconds. If the class list is messy, the page may still look fine, but the project feels rushed.

Tailwind is meant to style directly with utility classes. So your class attribute becomes part of your code quality, not a dumping ground.

Your to-do

Use a class order

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.

Start with display and layout: flex, grid, items-center, justify-between.
Add box styles next: width, padding, margin, border, rounded, shadow.
Add text styles after that: font, text size, leading, tracking.
Add colors and backgrounds near the end.
Keep responsive, state, and dark variants close to the class they change.

0 of 5 done

Building flex and grid layouts

3. Build flex and grid layouts

5 min

Key point

Pick the layout job

Use flex when items move in one direction: a navbar, a button row, a form field, or a hero section with text and an image.

Use grid when you need rows and columns together: project cards, pricing boxes, stats, or a dashboard.

Flex solves alignment

Most unfinished hackathon pages look weak because content touches edges, buttons float oddly, or cards do not line up. Flex fixes small layout problems fast.

Start with flex, then add direction, alignment, and gap. Avoid random margins on every child.

Example

Hero with flex

This is a common landing section for a college project. On a narrow screen, it stacks. On a wider screen, the text and preview sit side by side.

Making pages responsive and dark

4. Make it responsive first

4 min

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

Polishing and submitting repos

7. Submit a polished repo

4 min

Key point

Submit the proof

A polished repo is not just a good-looking page. It is a public project that someone else can open, run, and judge in two minutes.

Your proof should show three things clearly: a finished responsive page, dark mode styling, and readable Tailwind classes.

Think like a reviewer

A hackathon judge, senior student, or recruiter will not inspect every class. They will scan the live page, README, commit history, and folder structure.

Make the first screen count. Your page should not look like a raw Vite starter. It should have real spacing, type, layout, and dark mode states.

Your to-do

Final repo check

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.

10 questions, 7 to pass.

Tip

Use current v4 setup

In Tailwind CSS v4 with Vite, the modern setup uses the official Vite plugin and a single CSS import. Older tutorials may show @tailwind base, @tailwind components, and @tailwind utilities. For v4, use @import "tailwindcss".

/* src/index.css */
@import "tailwindcss";

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.

Example

Cleaned component

This card has the same visual result. The second version is easier to edit during demo-day fixes.

// Hard to scan
<article className="dark:bg-zinc-900 text-zinc-900 p-5 md:p-6 rounded-2xl bg-white shadow-sm border border-zinc-200 dark:text-zinc-100 dark:border-zinc-800 max-w-xl mx-auto">
  <h2 className="text-xl font-semibold tracking-tight">UPI Splitter</h2>
  <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
    Track shared chai, cab, and mess payments with friends.
  </p>
</article>

// Easier to scan
<article className="mx-auto max-w-xl rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm md:p-6 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
  <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
    UPI Splitter
  </h2>
  <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
    Track shared chai, cab, and mess payments with friends.
  </p>
</article>

Example

Extract components, not secrets

If three buttons use the same structure, make a component. Keep the Tailwind visible inside it.

function PrimaryButton({ children }) {
  return (
    <button className="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200">
      {children}
    </button>
  )
}

<PrimaryButton>Pay with UPI</PrimaryButton>

<section className="mx-auto flex max-w-6xl flex-col gap-8 px-4 py-10 md:flex-row md:items-center md:justify-between">
  <div className="max-w-xl">
    <p className="text-sm font-medium text-blue-600">HackIndia project</p>
    <h1 className="mt-3 text-4xl font-bold tracking-tight text-slate-950">
      Track campus expenses without spreadsheets
    </h1>
    <p className="mt-4 text-slate-600">
      Split chai, auto, and hostel costs with friends. Settle with UPI later.
    </p>
    <div className="mt-6 flex flex-wrap gap-3">
      <button className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white">Try demo</button>
      <button className="rounded-lg border border-slate-300 px-4 py-2 font-medium text-slate-900">View repo</button>
    </div>
  </div>

  <div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
    <div className="h-56 rounded-xl bg-slate-100"></div>
  </div>
</section>

Example

Project card grid

This pattern works for features, team members, events, products, or problem statements. The official Tailwind docs show the same idea with grid columns changing at breakpoints, such as grid-cols-3 md:grid-cols-4 lg:grid-cols-6.

<section className="mx-auto max-w-6xl px-4 py-10">
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    {features.map((feature) => (
      <article className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 className="text-lg font-semibold text-slate-950">{feature.title}</h2>
        <p className="mt-2 text-sm leading-6 text-slate-600">{feature.description}</p>
      </article>
    ))}
  </div>
</section>

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to convert a messy section into Tailwind flex or grid. Paste only the component, not secrets or API keys.

Check the answer for three things: the parent has flex or grid, spacing uses gap where possible, and the layout does not rely on fixed pixel widths everywhere.

Prompt:
Rewrite this React section using Tailwind CSS v4 utilities.
Use flex for the hero layout and grid for the cards.
Keep the content the same.
Avoid custom CSS and avoid absolute positioning unless needed.

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>

5. Add useful dark mode

4 min

Key point

One idea

Dark mode is not just a black background. It is a second pass on readability, contrast, borders, shadows, and form states.

In Tailwind v4, use the dark: variant for classes that should change when dark mode is active.

Default behaviour

Tailwind’s dark mode uses the user’s system setting by default. If your laptop or phone is set to dark mode, dark: classes apply automatically.

This is enough for many hackathon projects. A recruiter opening your Vite app should see a page that still looks finished in their preferred theme.

Example

Basic dark styling

Start with the page shell. Then handle cards, text, borders, and buttons. These are the places where unfinished dark mode is easiest to spot.

export default function App() {
  return (
    <main className="min-h-screen bg-slate-50 px-4 py-8 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
      <section className="mx-auto max-w-3xl rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
          Campus expense tracker
        </p>

        <h1 className="mt-3 text-3xl font-bold tracking-tight">
          Split mess bills without WhatsApp confusion
        </h1>

        <p className="mt-4 text-slate-600 dark:text-slate-300">
          Add shared expenses, track who paid, and settle with UPI.
        </p>

        <button className="mt-6 rounded-xl bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-400">
          Add expense
        </button>
      </section>
    </main>
  )
}

Your to-do

Check these parts

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.

Set your device or browser to dark mode.
Check body background, card background, and main text first.
Check muted text like descriptions, labels, dates, and helper text.
Check borders on cards, inputs, tables, and dividers.
Check hover, focus, disabled, and error states if your page has them.

0 of 5 done

Common mistake

Do not use dark:bg-black everywhere. Pure black can make cards, inputs, and sections blend together.

Use a small range like slate-950, slate-900, slate-800, and slate-300. This gives the page depth without custom CSS.

Tip

Use AI safely

You can ask ChatGPT, Gemini, or Claude to add dark: classes to one component. Paste only that component, not your whole repo.

Then check the output. Make sure it did not remove your responsive classes, change your logic, or add custom CSS you do not need.

Prompt:
Add useful Tailwind CSS v4 dark mode classes to this React component.
Keep the existing layout and responsive classes.
Do not add custom CSS.
Return only the updated component.

Example

Manual toggle option

If you want a theme switcher, override the dark variant in your main CSS. In Tailwind v4, the CSS entry point uses @import "tailwindcss".

Older tutorials may show @tailwind base, @tailwind components, and @tailwind utilities. That is outdated for v4.

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* Then add or remove the dark class on the html element */
document.documentElement.classList.toggle("dark")

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 your main page and add dark: classes to the body shell.
Update one card, one button, and one muted paragraph.
Switch your system to dark mode and refresh the app.
Fix any low-contrast text, invisible borders, or harsh black areas.
Commit the change with a clear message like add dark mode styling.

0 of 5 done

Example

README checklist

Your README does not need to be long. It needs to answer the questions a reviewer has before they run your app.

Use plain language. Mention what you built, how to run it, and where the Tailwind finish is visible.

# Campus Expense Splitter

A responsive Vite app for tracking shared college expenses.

## What is finished
- Responsive dashboard for mobile and desktop
- Dark mode styling for cards, text, borders, and buttons
- Tailwind CSS v4 utility classes kept readable
- Main page styled for a hackathon demo

## Run locally
npm install
npm run dev

## Tech used
- Vite
- Tailwind CSS v4

## Demo notes
Open the dashboard page and resize the browser.
Check dark mode using your system theme or the app toggle.

Tip

Use AI carefully

Ask AI to review your README and repo checklist, not to invent features. Paste your actual file tree and README draft.

Check every suggestion. Remove false claims like fake deployment links, unused libraries, or features your app does not have.

Prompt:
Review this hackathon repo README for clarity.
Do not add features that are not listed.
Tell me what a recruiter may not understand in 2 minutes.

Project summary:
[write your real project summary]

README:
[paste your README]

File tree:
[paste your file tree]

Tailwind CSS

1. Think in utility classes

One idea

Why this helps

Old CSS habit

Tailwind habit

2. Use spacing and type scales

One scale wins

Why it matters

Pick a spacing rhythm

6. Keep classes readable

One rule

Why it matters

Use a class order

3. Build flex and grid layouts

Pick the layout job

Flex solves alignment

Hero with flex

4. Make it responsive first

Mobile first

Why it matters

Set the viewport

7. Submit a polished repo

Submit the proof

Think like a reviewer

Final repo check

Read a utility

Do not translate everything

Use current v4 setup

Do this now

Set type levels

Before and after

Use AI carefully

Common mistake

Do this now

Cleaned component

Let Prettier help

Avoid fake cleanup

Extract components, not secrets

Do this now

Grid solves cards

Project card grid

Do not fight layout

Use AI carefully

Do this now

Responsive card grid

Do not stack breakpoints

Test four widths

Use AI carefully

Do this now

5. Add useful dark mode

One idea

Default behaviour

Basic dark styling

Check these parts

Common mistake

Use AI safely

Manual toggle option

Do this now

README checklist

Do not hide setup

Use AI carefully

Do this now