CSS Frameworks and Preprocessors: Tailwind, Bootstrap and Sass

Learn what CSS frameworks and preprocessors are, see small Tailwind, Bootstrap and Sass examples, compare pros and cons, and see what native CSS now does on its own.

What is a CSS framework or preprocessor?

A CSS framework is a big set of ready-made CSS that someone else wrote, so you don't start from zero. A preprocessor is a tool that lets you write CSS with extra features, and then turns it into normal CSS before the browser sees it. Think of a framework as a box of ready-made furniture, and a preprocessor as a better set of tools for building your own.

The three names you will hear most:

• Tailwind CSS – a "utility-first" framework: lots of tiny classes, each doing one thing.
• Bootstrap – a "component" framework: ready-made buttons, navbars, cards and a grid.
• Sass – a preprocessor: you write .scss files with variables, mixins and functions, and it compiles them to .css.

Tailwind CSS example

With Tailwind you style elements directly in the HTML with many small classes. For a quick test you can use its browser script; real projects install it with a build tool.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-2xl shadow-lg">
  <h2 class="text-xl font-bold text-slate-900">Pro plan</h2>
  <p class="mt-2 text-slate-600">All courses, certificates and support.</p>
  <button class="mt-4 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
    Upgrade
  </button>
</div>

You see a centered white card with rounded corners, a shadow, a bold title and a blue button that darkens on hover. Each class is one CSS rule: p-6 is padding, rounded-2xl is a large border radius, hover:bg-blue-700 changes the background on hover. You never open a CSS file.

Bootstrap example

Bootstrap gives you finished components. You add its stylesheet and use its class names.

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

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Pro plan</h5>
          <p class="card-text">All courses, certificates and support.</p>
          <a href="/upgrade" class="btn btn-primary">Upgrade</a>
        </div>
      </div>
    </div>
  </div>
</div>

You get a styled card in a responsive grid column, with a blue Bootstrap button, in just a few lines. The downside: many Bootstrap sites look alike, and changing the design deeply takes work.

Sass example

Sass lets you write styles in .scss files that look almost like CSS, with extras. A build tool turns them into a normal .css file.

@use "sass:color";

$brand: #2563eb;
$radius: 8px;

@mixin focus-ring {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

.btn {
  background: $brand;
  border-radius: $radius;
  color: white;

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

  &:focus-visible {
    @include focus-ring;
  }
}

$brand is a Sass variable, @mixin is a reusable block of declarations, &:hover is nesting, and color.adjust() makes a darker shade. Sass compiles this into plain CSS with fixed values.

Pros and cons compared

	Tailwind	Bootstrap	Sass
What it is	Utility classes	Ready components	CSS with extra features
Speed to start	Fast once you learn the classes	Very fast	Medium
Unique design	Easy	Harder (sites look similar)	Easy (you write everything)
HTML	Many classes per element	A few component classes	Clean
Needs a build step	Yes for real projects	No (can use a CDN)	Yes
Learning curve	Learn class names	Learn components	Learn Sass syntax

What native CSS now replaces

Many reasons people chose Sass ten years ago are now built into CSS itself, and you learned them in this course:

• Variables: CSS custom properties (--brand) do more than Sass variables, because they can change at runtime, for example in dark mode.
• Nesting: native CSS nesting with & works in all modern browsers.
• Color functions: color-mix() and relative colors replace Sass darken() and lighten().
• Math: calc(), clamp(), min() and max() work live in the browser.
• Organization: @layer controls the order of styles from frameworks and your own code.

Sass is still useful for mixins, loops and splitting big projects into many files, and Tailwind and Bootstrap are still popular in teams.

Tip: Learn plain CSS first, as you did in this course. Every framework is just CSS underneath. When something breaks in Tailwind or Bootstrap, you fix it with CSS knowledge: specificity, the box model, Flexbox and Grid.

Common mistake: Using Sass @import in new projects. It is deprecated; use @use and @forward instead.

Read about native nesting on MDN's CSS nesting guide.

Practice exercise

Build the same pricing card three times: once with plain CSS, once with Tailwind's browser script, and once with the Bootstrap CDN. Compare how long each took, how the HTML looks, and how easy it was to change the button color.

Hint: in plain CSS, put the color in a custom property like --brand so you can change it in one place.

Key takeaways

• A framework gives ready-made CSS; a preprocessor adds features and compiles to CSS.
• Tailwind uses utility classes, Bootstrap gives components, Sass extends the CSS language.
• Native CSS now has variables, nesting, color mixing and layers.
• Pick a tool based on the project and team, not on hype.
• Learn plain CSS first; it is what every tool produces in the end.