What is Tailwind CSS?
So far you have written CSS by inventing class names and writing rules for them: .hero, .card, .btn-primary. That works, but as projects grow you end up with long stylesheets, naming debates, and styles that are hard to reuse.
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS for every component, you compose styles from small, pre-built classes directly in your JSX.
Compare traditional CSS:
<button class="primary-btn">Hire me</button>
.primary-btn {
background-color: #2563eb;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 600;
}
…with Tailwind:
<button class="bg-blue-600 text-white px-4 py-2 rounded-md font-semibold">
Hire me
</button>
Each class does one thing:
| Class | CSS idea |
|---|---|
bg-blue-600 |
background color |
text-white |
text color |
px-4 / py-2 |
horizontal / vertical padding |
rounded-md |
border radius |
font-semibold |
font weight |
You already know CSS. Tailwind is a naming system for CSS you already understand.
Why use it with React?
- Styles live next to the markup they style
- Spacing, colors, and fonts come from a shared scale
- You can change layout without jumping between files
- Production CSS only includes the classes you use
What you will build
This module is project-based. You will build one complete portfolio site by adding one section (component) per lesson, in this order:
| Lesson | Component | Tailwind focus |
|---|---|---|
| Setup | App shell + style.css |
Vite plugin, @import, @theme, page colors |
| Navbar + theme | Navbar, ThemeToggle |
Flexbox, sticky nav, dark:, responsive menu |
| Hero | Hero |
Typography, flex layout, CTAs, avatar ring |
| Skills | Skills |
Responsive grid, cards, borders, shadows |
| Projects | Projects |
Card grids, hover motion, tags |
| Contact | Contact |
Forms, focus rings, transitions |
| Footer | Footer |
Borders, muted text, final polish |
Reference project structure (match this as you go):
react-tailwind/
├── index.html
├── vite.config.js
├── package.json
└── src/
├── main.jsx
├── style.css
├── App.jsx
└── components/
├── Navbar.jsx
├── ThemeToggle.jsx
├── Hero.jsx
├── Skills.jsx
├── Projects.jsx
├── Contact.jsx
└── Footer.jsx
Next: create the Vite + React app and install Tailwind.