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.
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>
)
}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.
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.
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.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")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.
0 of 5 done