Episode 1 — Fundamentals / 1.11 — CSS Frameworks TailwindCSS and Bootstrap

1.11.h — TailwindCSS vs Bootstrap

In one sentence: Tailwind and Bootstrap solve the same problem from opposite directions — Tailwind gives you utility primitives for maximum design freedom, Bootstrap gives you pre-built components for maximum speed — the right choice depends on your project, team, and design requirements.

Navigation: ← 1.11.g — Customizing Bootstrap · 1.11 Overview →

1. Head-to-head comparison

Dimension	TailwindCSS	Bootstrap
Philosophy	Utility-first: compose in HTML	Component-based: assemble pre-styled widgets
Markup style	Verbose class lists	Short, semantic class names
Production CSS	~5–15 KB (purged)	~25 KB gzipped (full) or less (cherry-picked)
Pre-built components	None (BYO or use libraries)	25+ components (navbar, modal, carousel…)
JavaScript	None included	Bundle.js for interactive widgets
Customization	`tailwind.config.js`	SASS variables + utilities API
Design freedom	Very high — pixel-perfect any design	Medium — opinionated defaults
Learning curve	Memorize utility class names	Learn component API + grid system
Responsive	Prefix classes (`md:flex`)	Grid classes (`col-md-6`) + display utilities
Dark mode	`dark:` variant (built-in)	Manual CSS variables or SASS overrides
Preprocessor	PostCSS (no SASS needed)	SASS (source) or plain CSS (CDN)
Community	80K+ GitHub stars, fast-growing	170K+ GitHub stars, mature ecosystem

2. Bundle size in practice

Full Bootstrap CSS (uncompressed):   ~230 KB
Full Bootstrap CSS (minified+gzip):  ~25 KB
Cherry-picked Bootstrap:             ~10–15 KB gzipped

Tailwind (dev, all classes):         ~3+ MB
Tailwind (production, purged):       ~5–15 KB gzipped

Tailwind's build step only includes classes you actually use, making production bundles consistently small regardless of how large the framework is.

Bootstrap ships complete component CSS unless you manually cherry-pick SASS imports. The CDN approach delivers the full library.

3. When to choose Tailwind

Scenario	Why Tailwind fits
Custom design system	No pre-built styles to override; start from design tokens
Pixel-perfect Figma/design match	Utility classes map directly to CSS properties
Modern frontend stack (React, Vue, Svelte)	Component reuse via framework, not CSS classes
Small production bundle	Purging removes unused classes automatically
Dark mode required	Built-in `dark:` variant
Long-term project	Styles are explicit in markup; easier to refactor

Tailwind ecosystem

Library	What it provides
Headless UI	Accessible, unstyled interactive components (modals, dropdowns)
shadcn/ui	Pre-built Tailwind components for React (copy-paste, not dependency)
DaisyUI	Component classes on top of Tailwind (Tailwind + component names)
Tailwind UI	Official premium component library

4. When to choose Bootstrap

Scenario	Why Bootstrap fits
Rapid prototyping / MVP	Pre-built components ship in hours
Admin panels / internal tools	Tables, forms, navbars, modals — all ready
Team unfamiliar with CSS	Components work without deep CSS knowledge
Quick CDN setup	One `<link>` tag, no build step needed
Interactive components	Modals, tooltips, dropdowns, carousels included
Enterprise / legacy projects	Massive ecosystem, long-term support, familiar to most developers

Bootstrap ecosystem

Library	What it provides
React-Bootstrap	Bootstrap components as React components
NG Bootstrap	Bootstrap for Angular
Bootswatch	Pre-made Bootstrap themes (one-line swap)
Bootstrap Icons	2000+ open-source SVG icons

5. The same page, two approaches

Feature section — Tailwind

<section class="py-16 px-4 bg-gray-50">
  <div class="max-w-6xl mx-auto text-center">
    <h2 class="text-3xl font-bold text-gray-900 mb-4">Features</h2>
    <p class="text-gray-600 mb-12 max-w-2xl mx-auto">
      Everything you need to build modern applications.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white rounded-xl shadow-sm p-8">
        <h3 class="text-xl font-semibold mb-3">Fast</h3>
        <p class="text-gray-600">Optimized for performance.</p>
      </div>
      <div class="bg-white rounded-xl shadow-sm p-8">
        <h3 class="text-xl font-semibold mb-3">Secure</h3>
        <p class="text-gray-600">Built with security in mind.</p>
      </div>
      <div class="bg-white rounded-xl shadow-sm p-8">
        <h3 class="text-xl font-semibold mb-3">Scalable</h3>
        <p class="text-gray-600">Grows with your needs.</p>
      </div>
    </div>
  </div>
</section>

Feature section — Bootstrap

<section class="py-5 bg-light">
  <div class="container text-center">
    <h2 class="mb-3">Features</h2>
    <p class="text-muted mb-5 mx-auto" style="max-width: 40rem;">
      Everything you need to build modern applications.
    </p>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title">Fast</h5>
            <p class="card-text text-muted">Optimized for performance.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title">Secure</h5>
            <p class="card-text text-muted">Built with security in mind.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title">Scalable</h5>
            <p class="card-text text-muted">Grows with your needs.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Both produce similar results. Tailwind is more explicit; Bootstrap is more concise. Tailwind gives you full control over every value; Bootstrap gives you sensible defaults.

6. Can you use both?

Technically yes, but it's rarely a good idea:

Concern	Issue
Conflicting resets	Both include CSS resets/normalizers that can clash
Bloated bundle	Two frameworks = double the CSS
Conflicting naming	Some utility names overlap (`p-4`, `text-center`)
Team confusion	"Which framework's class do I use here?"

Better approach: Pick one primary framework. If you need a few components from the other, copy the styles rather than importing the entire library.

7. Other options worth knowing

Framework	Category	Notable feature
Chakra UI	Component library (React)	Utility props on components, theme system
Ant Design	Component library (React)	Enterprise-focused, data-heavy components
Bulma	Component-based CSS	Pure CSS (no JS), flexbox-based
DaisyUI	Tailwind plugin	Adds component class names on top of Tailwind
shadcn/ui	Tailwind + Radix	Copy-paste React components, fully customizable
Pico CSS	Classless	Styles semantic HTML automatically; minimal

8. Decision matrix

                        Need pre-built       Custom design
                        components?          system?
                            │                    │
                     ┌──────┴──────┐      ┌──────┴──────┐
                     │  YES        │      │  YES        │
                     │             │      │             │
                 ┌───▼───┐    ┌───▼───┐  │  TailwindCSS │
                 │ Quick  │    │ React/ │  │  + Headless  │
                 │ proto? │    │ Vue?   │  │  UI library  │
                 │        │    │        │  └─────────────┘
              ┌──┴──┐  ┌──┴──┐│
              │ YES │  │ YES ││
              │     │  │     ││
          Bootstrap  React-   │
          (CDN)     Bootstrap / │
                    Chakra UI   │
                                │
                         Tailwind
                         (build step)

9. Key takeaways

Tailwind = utility-first, maximum design freedom, tiny purged bundles, no pre-built components.
Bootstrap = component-based, fast prototyping, pre-built interactive widgets, larger bundle.
Choose Tailwind for custom designs, modern frontend stacks, and long-term projects.
Choose Bootstrap for rapid MVPs, admin panels, and teams that need pre-built components.
Don't use both in the same project — pick one and extend it.
Neither is "better" — they optimize for different trade-offs.

Explain-It Challenge

Explain without notes:

Why Tailwind's production bundle is often smaller than Bootstrap's despite having more total classes.
A project scenario where Bootstrap is clearly the better choice over Tailwind (and why).
Why using both Tailwind and Bootstrap in the same project is generally a bad idea.

Navigation: ← 1.11.g — Customizing Bootstrap · 1.11 Overview →