CSS Frameworks: Bootstrap, Tailwind and When to Use Them

A CSS framework is a pre-written set of styles that gives you a head start: a grid, buttons, forms, spacing and typography. There are two main styles, and they feel very different to use.

• Component frameworks (Bootstrap, Bulma, Foundation) give you ready-made pieces such as .btn, .card and .navbar.
• Utility-first frameworks (Tailwind CSS, UnoCSS) give you tiny single-purpose classes such as p-4, flex and text-lg, which you combine in your markup.

The same card, three ways#

Plain CSS:

<article class="card">
  <h3 class="card__title">Plan</h3>
  <p class="card__text">Everything you need to get started.</p>
  <a class="card__link" href="#">Choose plan</a>
</article>

.card { padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.card__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; }
.card__text { margin: 0 0 1rem; color: #4b5563; }
.card__link { color: #0b5fff; font-weight: 500; }

Bootstrap:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Plan</h5>
    <p class="card-text">Everything you need to get started.</p>
    <a href="#" class="btn btn-primary">Choose plan</a>
  </div>
</div>

Tailwind CSS:

<article class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
  <h3 class="mb-2 text-xl font-semibold">Plan</h3>
  <p class="mb-4 text-gray-600">Everything you need to get started.</p>
  <a href="#" class="font-medium text-blue-600 hover:underline">Choose plan</a>
</article>

Different philosophies. Bootstrap gives you a named component that already looks like a card, and you customize it. Tailwind gives you no component at all, only the building blocks to describe one.

Bootstrap#

Bootstrap is the best-known component framework. It ships:

• A 12-column responsive grid built on flexbox (.container, .row, .col-md-6).
• Components: navbars, modals, dropdowns, accordions, forms, alerts.
• JavaScript behavior for the interactive components (no jQuery in recent versions).
• Utility classes for spacing, display and flex (mt-3, d-flex, justify-content-between).

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">…</div>
    <div class="col-12 col-md-6 col-lg-4">…</div>
    <div class="col-12 col-md-12 col-lg-4">…</div>
  </div>
</div>

col-12 col-md-6 col-lg-4 reads as: full width by default, half at the medium breakpoint, a third at large. Bootstrap's grid is mobile-first, so each prefix means "from this breakpoint and up".

Strengths: very fast to prototype, consistent, accessible by default for many components, and well documented. Weaknesses: sites can look generic if you use it unchanged, and overriding its styles fights its specificity.

Customize it through its Sass variables or CSS custom properties, not by stacking overrides on top.

Tailwind CSS#

Tailwind is utility-first. Each class does one thing, and you style an element by listing them.

<button class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white
               hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2
               md:px-6">
  Save
</button>

Prefixes apply a class conditionally: hover:, focus-visible:, dark: and breakpoints like md: (which means "from medium screens up"). Tailwind generates CSS only for classes it finds in your files, so the final stylesheet is small.

The design values (spacing scale, colors, breakpoints) come from a configuration that you can edit, so the framework adapts to your design system rather than imposing one. Setup differs between major versions, so follow the official installation guide for the version you use.

Strengths: you rarely leave your HTML, no naming decisions, no dead CSS growing over time, and a constrained set of values encourages consistency. Weaknesses: long class lists clutter markup, there is a learning curve for the class names, and you need a build step.

The "it's just inline styles" objection#

It is a common misunderstanding. Utilities differ from inline styles in important ways: they use a fixed design scale, they support hover, focus, breakpoints and dark mode, and they live in a stylesheet that is cached and can be overridden. You manage repetition by extracting components in your templating or framework layer (a React component, a partial), not by extracting CSS classes.

How to choose#

Questions worth asking before you adopt one:

1. What does it cost in bytes? Full Bootstrap CSS plus JavaScript is a notable download if you only need a grid.
2. Do I need a build step? Tailwind effectively does. Bootstrap can be used from a CDN.
3. How much of the design is custom? The more custom, the more you fight a component framework.
4. Who maintains it, and for how long? Both are widely used, but check for current versions.

Learn CSS first#

A framework hides CSS, it does not replace it. When a layout breaks, when a class does not behave as expected, when you need something the framework does not offer, you are debugging plain CSS. Developers who learned a framework without the fundamentals get stuck at exactly that point. What you have learned in this course is what lets you use a framework with confidence, and drop down a level when you need to.

Common mistakes#

• Overriding the framework with !important instead of using its customization system.
• Loading the whole framework for one feature.
• Copy-pasting giant class lists in many places without turning them into a component.
• Mixing two frameworks on the same page.
• Never reading the generated CSS or the DevTools output to learn what the classes do.
• Choosing by fashion instead of by project need.
• Not checking accessibility because the framework "handles it". Components still need correct labels and focus handling.

Practice#

1. Build the same pricing card in plain CSS, Bootstrap (from the CDN) and Tailwind (via its official play CDN or CLI). Note the lines of CSS, lines of HTML and total download size of each.
2. Recreate Bootstrap's col-md-6 behavior with a CSS Grid media query of your own. What do you gain and lose?
3. Using DevTools, inspect a Tailwind class like p-4 and a Bootstrap class like .btn, and write down the CSS they produce.
4. Decide, with reasons, which approach you would choose for a marketing site, an admin dashboard and a personal blog.