What Tailwind CSS is and how it works
Tailwind CSS is a utility-first CSS framework. Instead of choosing a prebuilt component such as btn-primary, you compose small, single-purpose classes directly in your markup. A class such as p-4 adds padding, text-lg changes font size, and rounded-xl rounds corners.
The browser still receives ordinary CSS. Tailwind scans your source files for class names and generates the corresponding CSS rules. It does not replace HTML, CSS fundamentals, or the browser layout engine; it gives you a consistent vocabulary for expressing styles.
Mental model: HTML describes structure, Tailwind classes describe presentation, and the generated stylesheet contains the rules the browser applies.
From markup to rendered UI
Key Takeaways
- Tailwind classes are CSS utilities, not a separate rendering system.
- The browser ultimately applies normal CSS rules.
- Class names should be complete and detectable in source files.
Knowledge Check
What is the main idea behind utility-first CSS?