Tailwind CSS
Tailwind Fundamentals(6)
What is Tailwind CSS?
Why utility-first works, what problems it solves, and how it fits modern stacks.
Utility-First Concept
How utilities replace handcrafted CSS and what “composition” really means.
Installation (CDN vs CLI vs Vite)
Choose the right setup for production and local development.
Configuration File (tailwind.config.js)
Content paths, theme extension, and safe defaults.
JIT Engine
How Tailwind generates classes on demand and why it matters.
Content Scanning (Purge) & Build Output
Keep CSS tiny by scanning templates and removing unused utilities.
Layout & Spacing(6)
Container & Breakpoints
Responsive prefixes (sm/md/lg/xl) and container strategy.
Flexbox Utilities
Build responsive layouts with flex utilities and alignment rules.
Grid Utilities
Grid templates, gaps, and responsive grid patterns.
Spacing Scale
Understand Tailwind spacing and how to stay consistent.
Responsive Design (Mobile-first)
How to design mobile-first and scale up cleanly.
Common Layout Patterns
Holy grail, sidebar layouts, sticky headers, and practical templates.
Typography & Styling(6)
Colors & Theme
Using the color palette, customizing theme colors, and consistency.
Typography
Font sizes, weights, leading, tracking, and readable defaults.
Backgrounds & Gradients
Background utilities, gradients, and layering.
Borders & Radius
Borders, rings, rounding, and focus styles.
Shadows & Elevation
Shadow scale, depth, and subtle UI elevation.
Dark Mode
Class strategy, theming, and avoiding dark-mode bugs.
Components & Patterns(6)
Buttons
Variants, sizes, focus states, and disabled patterns.
Cards
Card layouts, spacing, shadows, and responsive behavior.
Navbar
Responsive navigation patterns and dropdown-friendly structure.
Forms
Inputs, validation styles, rings, and accessible focus states.
Modals
Modal structure, overlay patterns, and keyboard accessibility.
Page Sections
Hero sections, feature grids, pricing blocks, and footers.
Advanced Tailwind(6)
Customizing Theme
Extend spacing, colors, typography, and create design tokens.
Plugins
Official plugins and building your own utilities.
Extracting Components
When to extract, how to avoid duplication, and maintainability.
@apply Directive
When @apply helps and when it creates problems.
Tailwind with Frameworks (React/Next/Vite)
Integration patterns and common gotchas.
Performance Optimization
Build size, content scanning, and production output hygiene.
Tailwind vs Bootstrap(5)
Philosophy Differences
Component-first vs utility-first and what it changes in workflow.
Bundle Size & Performance
How build output and unused CSS differ between the two.
Developer Experience (DX)
Speed of building, consistency, refactoring, and collaboration.
When to Choose Tailwind
Best fits: design systems, modern apps, rapid UI iteration.
When to Choose Bootstrap
Best fits: classic admin panels, fast prototypes, consistent components.