HomeReact
Chapter 6
06 — Styling in React
Multiple approaches to styling React components — from simple inline styles to full CSS-in-JS solutions.
Approaches Comparison
| Approach | Scoped? | Dynamic? | Bundle Impact | Learning Curve |
|---|---|---|---|---|
| Inline styles | ✅ Per element | ✅ JS values | None | None |
| CSS Modules | ✅ Per file | ⚠️ Class toggle | Small | Low |
| Tailwind CSS | ✅ Utility | ✅ Class logic | Tree-shaken | Medium |
| Styled Components | ✅ Per component | ✅ Props-based | Runtime CSS | Medium |
| Global CSS | ❌ Global | ❌ Static | Small | None |
When to Use What
| Use Case | Best Approach |
|---|---|
| Quick prototype | Inline styles or Tailwind |
| Component library | CSS Modules or Styled Components |
| Design system | Tailwind with config |
| Dynamic theme | Styled Components or CSS variables |
| Animation-heavy | Tailwind + Framer Motion |
CSS Modules (Recommended Default)
import styles from './Button.module.css';
<button className={styles.primary}>Click</button>- Class names are auto-scoped (no collisions)
- Zero runtime cost (compiled at build time)
- Works out of the box with Vite
Tailwind CSS (Most Popular)
<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Click
</button>File
styling.tsx— inline styles, CSS Modules, Tailwind, Styled Components, conditional classes, dynamic theming