Chapter 11 of 12
CSS frameworks are pre-built collections of CSS (and sometimes JavaScript) that give you ready-made components and utilities. They trade flexibility for speed. Understanding the tradeoffs helps you choose the right tool.
| Type | How it works | Example | Tradeoff |
|---|---|---|---|
| Component framework | Pre-built components with fixed styles | Bootstrap, Bulma | Fast to start, harder to customise, design looks generic |
| Utility framework | Atomic CSS classes you compose yourself | Tailwind CSS | Highly customisable, verbose HTML, consistent design tokens |
<!-- Without Tailwind (you write CSS) -->
<div class="card">
<h3 class="card-title">Hello</h3>
</div>
/* You write this CSS */
.card { background: #201D15; padding: 1.5rem; border-radius: 8px; }
.card-title { font-size: 1.25rem; font-weight: bold; }
<!-- With Tailwind (compose classes in HTML) -->
<div class="bg-warm-700 p-6 rounded-lg">
<h3 class="text-xl font-bold">Hello</h3>
</div>
<!-- No CSS file needed — Tailwind generates only what you use -->TIP
Learn plain CSS first. Don't jump into Tailwind without understanding CSS fundamentals. Tailwind is CSS with a different syntax — if you don't understand what flex, grid, padding, and border-radius do, the class names are meaningless. Build the foundation first, then the framework is easy.