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.
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;
}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>
);
}Read a utility
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
Do not translate everything
Beginners often write one custom class, then fill CSS with rules that Tailwind already has. That gives you the worst of both worlds.
Use utilities for normal styling. Save custom CSS for things Tailwind cannot express cleanly, or for shared tokens later in the track.
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";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