Docs
/
CSS Tailwind
CSS & Tailwind — Learning Roadmap
Modern CSS mastery and utility-first development with Tailwind CSS.
Topics
| # | Topic | Key Concepts |
|---|---|---|
| 01 | CSS Fundamentals | Selectors, specificity, cascade, inheritance, box model, display, positioning |
| 02 | Flexbox | Flex container/items, axes, justify-content, align-items, flex-grow/shrink, order, wrapping |
| 03 | CSS Grid | Grid container, rows/columns, template areas, auto-flow, minmax, repeat, subgrid |
| 04 | Responsive Design | Media queries, mobile-first, container queries, fluid typography, viewport units |
| 05 | CSS Custom Properties | Variables, theming, dark mode, dynamic values, fallbacks, scope |
| 06 | Animations & Transitions | Transitions, keyframes, transform, animation properties, performance, @view-transition |
| 07 | Modern CSS Features | :has(), :is(), :where(), nesting, @layer, @container, color-mix(), @scope |
| 08 | CSS Architecture | BEM, ITCSS, utility-first, CSS Modules, CSS-in-JS, specificity management |
| 09 | Tailwind Fundamentals | Utility classes, responsive prefixes, states (hover/focus), dark mode, configuration |
| 10 | Tailwind Components | Building cards, navbars, forms, modals, layouts with utilities, @apply extraction |
| 11 | Tailwind Customization | tailwind.config, custom colors/spacing/fonts, plugins, presets, extending theme |
| 12 | Tailwind Advanced | Arbitrary values, groups, peer modifiers, JIT, prose (typography), container queries |
| 13 | Accessibility (a11y) | Color contrast, focus management, screen reader text, reduced motion, ARIA, semantic HTML |
| 14 | Performance | Critical CSS, purging unused CSS, content-visibility, contain, will-change, font loading |
| 15 | Real-World Layouts | Dashboard, landing page, blog, e-commerce grid, sticky header/footer, sidebar patterns |
How to Use
- Master CSS fundamentals, Flexbox, Grid — the layout foundation
- Learn responsive design and custom properties for modern patterns
- Study animations and modern CSS features for polished UIs
- Switch to Tailwind (topics 09-12) for rapid utility-first development
- Finish with accessibility, performance, and real-world layouts