Utility-first means composing designs using small, single-purpose classes like 'p-4', 'flex', 'text-center' directly in your HTML, instead of writing custom CSS.

Tailwind's spacing scale multiplies by 0.25rem. p-4 = 4 × 0.25rem = 1rem = 16px. This applies to all four sides.

Text color uses 'text-{color}-{shade}' pattern. text-blue-500 gives you medium blue. Lower numbers (100) are lighter, higher (900) are darker.

flex creates a flex container. justify-between spreads items with space between them. items-center vertically centers them. This is the classic navbar pattern.

flex-1 (shorthand for flex: 1 1 0%) makes an element grow to fill available space. It's commonly used for flexible layouts.

grid enables CSS Grid. grid-cols-3 creates 3 equal columns. gap-4 adds 1rem (16px) spacing between grid items.

Tailwind is mobile-first. md:hidden means 'apply hidden at 768px and wider'. The element is visible on mobile, hidden on tablet/desktop.

Tailwind uses the 'hover:' prefix for hover states. You can prefix any utility: hover:bg-blue-500, hover:text-white, hover:scale-105, etc.

transition enables CSS transitions. duration-300 sets the transition duration to 300 milliseconds, making state changes (like hover) animate smoothly.

tailwind.config.js is the configuration file. Add custom colors under theme.extend.colors to keep defaults and add your own. Then use them like bg-brand, text-brand, etc.