CSS Frameworks (Overview)
Pre-built CSS toolkits like Bootstrap and Tailwind that speed up development — know what they are and when to use them.
What you will learn
- Know the main CSS frameworks
- Understand the trade-offs
- Decide when a framework helps
What is a CSS framework?
A framework is a ready-made library of CSS (and sometimes components) so you do not start from scratch. The big names:
| Framework | Style |
|---|---|
| Bootstrap | Ready-made components (navbars, cards, modals) and a grid system |
| Tailwind CSS | Utility classes you compose (e.g. class="flex gap-4 p-6") |
| Bulma / Foundation | Component and grid frameworks like Bootstrap |
To make the idea concrete, here is the same button written in raw CSS versus in Tailwind (a utility-class framework):
<!-- Raw CSS: you write the rules yourself -->
<style>
.btn { background:#4338ca; color:#fff; padding:8px 16px; border-radius:8px; }
</style>
<button class="btn">Click me</button>
<!-- Tailwind: you compose ready-made utility classes -->
<button class="bg-indigo-700 text-white px-4 py-2 rounded-lg">Click me</button>Both buttons look the same. In the raw-CSS version you write the rules in a <style> block. In the Tailwind version there is no <style> at all — each class is a tiny pre-made rule: bg-indigo-700 = a background colour, px-4 py-2 = padding, rounded-lg = a border radius. A framework gives you those building blocks so you assemble styles instead of writing them — faster once learned, but only meaningful because you already understand what each class is really doing underneath.
Note: Frameworks are fast and consistent, but they add weight and a learning curve, and many sites end up looking similar. Learn raw CSS first (which you are doing) — then a framework becomes a power tool, not a crutch.
Tip: In the MERN and Laravel courses you will likely meet Tailwind CSS or Bootstrap. Because you understand the underlying CSS, you will pick them up quickly and know what each class really does.
Q. What is the main benefit of a CSS framework like Bootstrap?
✍️ Practice
- Browse the Bootstrap and Tailwind websites and note one component from each you would use.
🏠 Homework
- Write a short note: for your next project, would you use raw CSS, Bootstrap or Tailwind — and why?