Tailwind fundamentals (styling system)

Goal: style React UI quickly without creating an unmaintainable mess.

Use these sources (in order)

• Tailwind docs (official): https://tailwindcss.com/docs 
• Responsive design: https://tailwindcss.com/docs/responsive-design 
• Hover/focus/active and other states: https://tailwindcss.com/docs/hover-focus-and-other-states 
• Dark mode (if we use it): https://tailwindcss.com/docs/dark-mode 
• “Preflight” (why some defaults differ): https://tailwindcss.com/docs/preflight 

What “good” looks like

• Prefer composition (small components) over huge class strings.
• Use consistent spacing + typography scale.
• Encode states: loading/disabled/error/empty.
• Avoid random one-off values unless there’s a design reason.

Exercises

• Exercise 1: content/exercises/02-tailwind/01-style-the-react-exercise.mdx