Styling options
| Approach | Best for |
|---|---|
| Plain CSS | Simple projects |
| CSS Modules | Scoped component styles |
| Utility CSS (Tailwind) | Fast UI composition |
| CSS-in-JS | Dynamic styling needs |
CSS Modules example
tsx
import styles from './Button.module.css';
export function Button() {
return <button className={styles.primary}>Save</button>;
}Conditional classes
tsx
const cls = isActive ? 'btn btn-active' : 'btn';
return <button className={cls}>Click</button>;Styling best practices
- Pick one primary strategy team-wide
- Keep design tokens centralized
- Avoid excessive inline styles
Next, we begin Hooks essentials with useState.