1.11 — CSS Frameworks (TailwindCSS & Bootstrap): Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim top-to-bottom in one pass before interviews or exams.
2. If a row feels fuzzy — reopen the matching lesson: README.md → 1.11.a…1.11.h.
3. Drills — 1.11-Exercise-Questions.md.
4. Polished answers — 1.11-Interview-Questions.md.

---

1.11.a Introduction to CSS Frameworks

What CSS Frameworks Provide

Feature	Description
Ready-made styles	Buttons, forms, typography — pre-built
Layout systems	Grids, flexbox helpers for responsive design
Design tokens	Consistent spacing, colors, breakpoints
Conventions	Team-wide standards to reduce bikeshedding

Categories

Category	Example	Core idea
Utility-first	TailwindCSS	Small atomic classes composed in HTML
Component-based	Bootstrap	Pre-styled widgets assembled with class names
CSS-in-JS	styled-components	Styles in JavaScript, scoped per component
Headless	Radix UI	Behavior only, BYO styles

Trade-offs

Benefit	Cost
Speed	Learning curve
Consistency	Bundle size
Responsive by default	Design uniformity
Community	Dependency risk

---

1.11.b Utility-First vs Component-Based

Side-by-side

Aspect	Utility-first	Component-based
Markup	Long class lists	Short class names
CSS output	Tiny (purged)	Larger (full library)
Design freedom	High	Medium
Pre-built components	None	Dozens
Naming	No naming needed	Learn component API
Consistency	Via config/discipline	Automatic

Same button, two ways

<!-- Tailwind -->
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Save</button>

<!-- Bootstrap -->
<button class="btn btn-primary">Save</button>

---

1.11.c TailwindCSS Setup & Basics

Setup Commands

npm install -D tailwindcss
npx tailwindcss init          # creates tailwind.config.js

/* CSS entry file */
@tailwind base;
@tailwind components;
@tailwind utilities;

Essential Config

module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Core Utility Classes

Utility	CSS
flex	display: flex
items-center	align-items: center
justify-between	justify-content: space-between
p-4	padding: 1rem
m-2	margin: 0.5rem
gap-4	gap: 1rem
bg-blue-500	background-color: #3b82f6
text-white	color: #fff
text-lg	font-size: 1.125rem
font-bold	font-weight: 700
rounded-lg	border-radius: 0.5rem
shadow-md	medium box shadow
w-full	width: 100%
hidden	display: none
block	display: block

Responsive Prefixes (mobile-first)

Prefix	Min-width
(none)	0 (all)
sm:	640px
md:	768px
lg:	1024px
xl:	1280px
2xl:	1536px

State Variants

Variant	When
hover:	Mouse over
focus:	Has focus
active:	Being clicked
disabled:	Disabled
dark:	Dark mode active
group-hover:	Parent hovered

Spacing Scale

Class	rem	px (at 16px root)
-1	0.25rem	4px
-2	0.5rem	8px
-4	1rem	16px
-6	1.5rem	24px
-8	2rem	32px
-12	3rem	48px
-16	4rem	64px

---

1.11.d Building with Tailwind

Layout Patterns

<!-- Flex row with centered items -->
<div class="flex items-center justify-between gap-4">...</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">...</div>

<!-- Show/hide by breakpoint -->
<div class="hidden md:block">Desktop only</div>
<div class="block md:hidden">Mobile only</div>

Dark Mode

// tailwind.config.js
module.exports = { darkMode: "class" }; // or "media"

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

Mode	Activation
"media"	OS prefers-color-scheme
"class"	class="dark" on parent element

Component Reuse

Prefer framework components (React, Vue) over @apply. Use @apply only for global styles you can't abstract into components.

---

1.11.e Introduction to Bootstrap

Installation

Method	How
CDN	<link> + <script> tags — no build step
npm	npm install bootstrap → import in JS
SASS	npm install bootstrap → @import with variable overrides

Grid Basics

.container  →  centers content, sets max-width
  └── .row  →  flex container
       └── .col-*  →  column width (1–12)

Breakpoints

Infix	Min-width
(none)	0
sm	576px
md	768px
lg	992px
xl	1200px
xxl	1400px

---

1.11.f Bootstrap Grid & Components

Grid Patterns

<!-- Two equal columns -->
<div class="row"><div class="col-6">A</div><div class="col-6">B</div></div>

<!-- Responsive: full → half → third -->
<div class="col-12 col-md-6 col-lg-4">...</div>

<!-- Centered column with offset -->
<div class="col-md-6 offset-md-3">Centered</div>

Key Components

Component	Classes
Button	btn btn-primary, btn-outline-danger, btn-lg
Card	card, card-body, card-title, card-text
Navbar	navbar navbar-expand-lg, navbar-brand, nav-link
Modal	modal, modal-dialog, modal-content, modal-header/body/footer
Alert	alert alert-success, alert-dismissible
Form	form-control, form-label, form-check, form-select
Badge	badge bg-primary, rounded-pill

Gutter Classes

Class	Axis
g-4	Both
gx-4	Horizontal
gy-4	Vertical

---

1.11.g Customizing Bootstrap

SASS Variable Override Pattern

// 1. Define overrides (BEFORE import)
$primary: #6366f1;
$border-radius: 0.75rem;

// 2. Import Bootstrap (uses !default, picks up your values)
@import "bootstrap/scss/bootstrap";

Cherry-Picking (Reduce Bundle)

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities/api";

Bundle Size Reduction

Technique	Effect
Cherry-pick imports	50–70% smaller
PurgeCSS	Removes unused classes
Skip JS bundle	No JS if not using interactive components
Minify + gzip	~230 KB → ~25 KB

---

1.11.h TailwindCSS vs Bootstrap — Comparison

Master Comparison Table

Dimension	TailwindCSS	Bootstrap
Philosophy	Utility-first	Component-based
Production CSS	~5–15 KB gzipped	~25 KB gzipped
Components	None built-in	25+ ready-made
JavaScript	None	Bundle.js included
Customization	tailwind.config.js	SASS variables
Dark mode	dark: variant	data-bs-theme / CSS vars
Build step	Required (PostCSS)	Optional (CDN works)
Design freedom	Very high	Medium
Learning curve	Memorize classes	Learn component API

When to Use Each

Tailwind	Bootstrap
Custom design system	Rapid prototyping / MVP
Modern stack (React/Vue)	Admin panels, internal tools
Small bundle priority	Team needs pre-built components
Long-term project	No build step available
Pixel-perfect design match	Enterprise / legacy project

Ecosystem

Tailwind	Bootstrap
Headless UI	React-Bootstrap
shadcn/ui	NG Bootstrap
DaisyUI	Bootswatch
Tailwind UI (premium)	Bootstrap Icons

---

One-liner definitions

Term	One-liner
CSS framework	Pre-written CSS providing styles, layout, and design tokens for faster development.
Utility-first	Small, single-purpose classes composed directly in HTML markup.
Component-based	Pre-styled, named components assembled with short class names.
TailwindCSS	Utility-first CSS framework; compose designs with atomic classes like flex, p-4, bg-blue-500.
Bootstrap	Component-based CSS framework; pre-built widgets + 12-column grid + JS plugins.
Purging	Build-time removal of unused CSS classes to minimize production bundle.
JIT	Just-In-Time compilation; generates only the CSS for classes you actually use.
@apply	Tailwind directive to extract utility patterns into custom CSS classes.
!default	SASS keyword meaning "use this value unless already defined" — enables overrides.
Design tokens	Named values (colors, spacing, fonts) that define a design system's visual language.
12-column grid	Bootstrap's flexbox layout system; 12 divides into halves, thirds, quarters, sixths.
Content paths	Tailwind config array that tells the build tool which files to scan for class names.
Mobile-first	Base styles target small screens; larger-screen styles are added with breakpoint prefixes.
Breakpoint prefix	Responsive class modifier (sm:, md:, lg:) applying styles at min-width and above.
State variant	Class modifier (hover:, focus:, active:) applying styles on interaction state.
Cherry-picking	Importing only specific SASS partials to reduce Bootstrap's output CSS.
Utilities API	Bootstrap 5 feature for generating custom utility classes via SASS maps.
Headless UI	Accessible, unstyled component library designed to pair with Tailwind.
shadcn/ui	Copy-paste React component library built with Tailwind + Radix primitives.

---

Master workflow — Choosing a CSS Framework

1. Learn CSS first — understand box model, flexbox, grid, cascade.
2. Identify project needs — custom design? rapid prototype? team skills?
3. Pick one framework — Tailwind for custom, Bootstrap for pre-built.
4. Configure — Tailwind: tailwind.config.js. Bootstrap: SASS variables.
5. Build responsive — both are mobile-first; use breakpoint prefixes/classes.
6. Optimize bundle — Tailwind: automatic purging. Bootstrap: cherry-pick + PurgeCSS.
7. Extract patterns — Tailwind: framework components. Bootstrap: SASS mixins + custom classes.
8. Ship — verify production CSS is minimal; test responsiveness across breakpoints.

---

End of 1.11 quick revision.