CSS Frameworks: Tailwind CSS, Bootstrap and When to Use Them

A CSS framework is a ready-made collection of CSS (and sometimes JavaScript) that gives you layouts, components or utility classes, so you do not write everything from scratch. Many job descriptions for front-end and web developers mention one, most often Tailwind CSS or Bootstrap.

Frameworks do not replace CSS knowledge. When something looks wrong, you debug it with the same box model, Flexbox, Grid and cascade you learned in this course.

Two kinds of framework#

Bootstrap in brief#

Bootstrap provides a grid, ready-made components (buttons, navbars, cards, modals, forms) and utilities:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-8">Main</div>
    <div class="col-md-4">Sidebar</div>
  </div>
  <button class="btn btn-primary">Save</button>
</div>

col-md-8 means "8 of 12 columns from the medium breakpoint upwards". Interactive components such as dropdowns and modals also need Bootstrap's JavaScript file.

Tailwind CSS in brief#

Tailwind gives you one small class for almost every CSS declaration, and you compose them in the HTML. Each class maps directly to CSS you already know:

A card in Tailwind:

<div class="max-w-sm rounded-xl border border-gray-200 p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-gray-900">HTML course</h3>
  <p class="mt-2 text-gray-600">Learn the structure of the web.</p>
  <a href="/html" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    Start learning
  </a>
</div>

Variants#

Prefixes apply a class only in a certain state or screen size:

<button class="bg-blue-600 hover:bg-blue-700 focus-visible:outline-2 disabled:opacity-50">Save</button>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">...</div>
<div class="bg-white dark:bg-gray-900">...</div>

• hover:, focus-visible:, disabled: are pseudo-classes.
• md:, lg: are mobile-first min-width media queries.
• dark: applies in dark mode.

Tailwind scans your files when the site is built and generates CSS for only the classes you used, so the final stylesheet stays small.

Preprocessors: Sass#

Sass (SCSS syntax) is a language that compiles to CSS. It popularised variables, nesting, mixins and partial files. Many of its main features now exist in plain CSS (custom properties, nesting, @layer), so new projects often do not need it, but you will meet it in many existing codebases:

@use "sass:color";

$brand: #2f5fe0;

.btn {
  background: $brand;
  &:hover { background: color.adjust($brand, $lightness: -10%); }
}

Should you use a framework?#

Use one when it saves real time for your project, and learn plain CSS first. A good path:

1. Learn CSS fundamentals well (this course).
2. Build a few small projects in plain CSS.
3. Then learn the framework your target jobs ask for. With solid CSS, Tailwind or Bootstrap takes days, not weeks, because every class is CSS you already understand.

The Web Developer role path shows where frameworks fit into the bigger picture.

Practice#

<div class="flex items-center gap-3 rounded-lg border-l-4 border-amber-500 bg-amber-50 p-4 text-amber-900">

.alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  padding: 1rem;
  color: #78350f;
}

<div class="alert">⚠ Your trial ends in 3 days.</div>

Key takeaway#