Topics
- What is Tailwind vs Bootstrap?
- Installation: CDN, NPM, CLI
- Configuring
tailwind.config.js
- VS Code Setup + IntelliSense
- NEW JIT (Just-in-Time) Compiler
Practice Tasks
- Set up a local Tailwind project via NPM
- Create a simple profile card
Outcome: Environment Setup & Basic Config.
Topics
- Spacing (m, p) & Sizing (w, h)
- Typography (size, weight, align)
- Backgrounds & Borders
- NEW Arbitrary Values (
w-[350px])
- NEW Opacity modifiers (
bg-red-500/50)
Practice Tasks
- Build a product card using only utilities
- Style a button with custom shadows
Outcome: Style elements without writing CSS.
Topics
- Flexbox Utilities (flex, justify, items)
- Grid Utilities (grid-cols, gap)
- Positioning (absolute, relative, z-index)
- Container & Breakpoints
- NEW
basis, grow, shrink
Practice Tasks
- Create a responsive Navbar
- Build a photo gallery with Grid
Outcome: Build complex layouts fast.
Topics
- Hover, Focus, Active states
- First-child, Last-child, Odd/Even
- NEW Group modifiers (
group-hover)
- NEW Peer modifiers (
peer-checked)
- NEW
has-[] selectors
Practice Tasks
- Create an animated card on hover
- Build a custom checkbox with peer
Outcome: Create interactive UI components.
Topics
- Mobile-First approach
- Breakpoints (sm, md, lg, xl, 2xl)
- Hiding/Showing elements
- Responsive typography
Practice Tasks
- Convert a desktop layout to mobile
- Build a responsive sidebar
Outcome: Pixel-perfect responsive sites.
Topics
- Blur, Brightness, Contrast
- Box Shadows & Drop Shadows
- NEW Backdrop Filters (Glassmorphism)
- NEW Mix Blend Modes
- Transitions & Animations (animate-spin)
Practice Tasks
- Create a glass-effect modal
- Build a loading spinner
Outcome: Add modern visual effects.
Topics
tailwind.config.js Deep Dive- Extending the Theme (Colors, Fonts)
- Adding Custom Utilities (@layer)
- Functions & Directives (@apply)
Practice Tasks
- Create a custom brand color palette
- Create reusable button classes with @apply
Outcome: Adapt Tailwind to your brand.
Topics
- Enabling Dark Mode (class vs media)
- Using the
dark: prefix
- Building a Theme Toggle Switch
- System preference detection
Practice Tasks
- Add Dark Mode to a landing page
- Persist theme in LocalStorage
Outcome: Professional Light/Dark theming.
Topics
- NEW Official Plugins Setup
@tailwindcss/forms (Better inputs)@tailwindcss/typography (Prose)@tailwindcss/container-queries- Prettier Plugin for Class Sorting
Practice Tasks
- Style a form using the forms plugin
- Format a blog post with typography
Outcome: Extend Tailwind capabilities.
Project Options
- SaaS Landing Page: Grids, Hero, Pricing
- E-commerce Dashboard: Sidebar, Tables
- Portfolio: Dark Mode, Forms, Gallery
Requirements
- Fully Responsive
- Custom Config & Fonts
- Component Extraction
Outcome: Deployment Ready Modern UI.
Topics
- Tailwind + React/Next.js
- Tailwind + Vite Setup
- Optimization (Tree-shaking/Purge)
- Headless UI (Overview)