Tailwind CSS - lesson 6 | HackIndia Skills

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

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>

Tip

Let Prettier help

Use the official Tailwind Labs Prettier plugin if your project already uses Prettier. It can sort Tailwind classes and clean up unnecessary whitespace and duplicate classes.

Do not fight your formatter. Agree on one style in the repo, run it before committing, and keep review comments for real UI issues.

Common mistake

Avoid fake cleanup

Beginners often create custom CSS class names just to hide long Tailwind strings. That can make the JSX shorter but the styling harder to trace.

Only extract when a pattern repeats many times or becomes a real component, like Button, Card, or PageHeader. Do not extract a one-off section just because the class list looks long.