Tailwind CSS - lesson 5 | HackIndia Skills

Tailwind CSS - lesson 5 | HackIndia Skills | HackIndia

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>
  )
}

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")

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

Quick check