Tailwind CSS - lesson 6 | HackIndia Skills

Tailwind CSS - lesson 6 | HackIndia Skills | HackIndia

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>

Keep classes readable

One rule

Why it matters

Use a class order

Cleaned component

Let Prettier help

Avoid fake cleanup

Extract components, not secrets

Do this now

Quick check