CSS Frameworks

contain

Why CSS Frameworks?

Writing CSS from scratch for every project is slow. Frameworks give you:

  • Pre-built styles - buttons, cards, forms ready to use
  • Consistent design - everything looks like it belongs together
  • Responsive by default - works on all screen sizes
  • Faster development - focus on content, not styling details

This is what AI tools use when they generate code for you.

The CSS Framework Landscape

Two Approaches

Component-based Utility-first
Pre-built components (buttons, navbars) Small single-purpose classes
Add a class, get a styled component Combine classes to build any design
Bootstrap, Bulma Tailwind CSS
Faster to start More flexible
Sites tend to look similar Unique designs, more classes in HTML

Bootstrap (2011)

The original CSS framework. Still widely used in enterprise.

<!-- A Bootstrap button -->
<button class="btn btn-primary">Click Me</button>

<!-- A responsive grid -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Left half</div>
    <div class="col-md-6">Right half</div>
  </div>
</div>

When you see btn, container, row, col- in code, that's Bootstrap.

Tailwind CSS (2017)

The modern standard. This is what AI tools generate.

<!-- A Tailwind button -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  Click Me
</button>

<!-- A responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
  <div>Left half</div>
  <div>Right half</div>
</div>

When you see bg-, text-, px-, py-, rounded, hover:, that's Tailwind.

Reading Tailwind Classes

Tailwind class names describe what they do:

Class What it does Vanilla CSS equivalent
bg-blue-500 Blue background background-color: #3b82f6
text-white White text color: white
px-4 Horizontal padding padding-left/right: 1rem
py-2 Vertical padding padding-top/bottom: 0.5rem
rounded Rounded corners border-radius: 0.25rem
hover:bg-blue-700 Darker on hover .btn:hover { background:... }

You don't need to memorize these. Just know how to read them.

Same Card: Vanilla CSS vs Tailwind

Vanilla CSS:

<div class="card">...</div>

.card { padding: 20px; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

Tailwind:

<div class="p-5 rounded-lg shadow-md">...</div>

No separate CSS file needed. Styles live in the HTML.

shadcn/ui: Component Library

shadcn/ui is a popular component library built on Tailwind:

  • Pre-built, polished components (buttons, cards, forms, modals)
  • Used by many AI tools under the hood
  • Built on React + Tailwind (we'll learn React basics later)

Think of it as "Tailwind + ready-made building blocks." You'll see it in AI-generated code.

AI and CSS Frameworks

What AI Tools Generate

When you use Copilot, Cursor, v0.dev, or Replit, the CSS they produce usually uses:

  • Tailwind CSS - the most common in AI-generated code
  • shadcn/ui components - when building more complex UIs
  • Sometimes vanilla CSS or Bootstrap

Your job: understand what the AI wrote, not memorize the syntax.

What You Need to Know

You do NOT need to:

  • Memorize Tailwind classes
  • Set up Bootstrap or Tailwind yourself
  • Write framework code from scratch

You DO need to:

  • Recognize framework classes when you see them
  • Understand what the AI-generated code is doing
  • Modify AI output confidently (change a color, adjust spacing)
  • Know the difference between vanilla CSS and framework CSS

References