Skip to main content
Web Development Beginner

TailwindCSS Basics

Utility-first CSS in practice. Compose layouts from Tailwind's spacing, flexbox and grid utilities, handle hover and focus states and responsive breakpoints, add dark mode, and build reusable cards, forms and navigation.

21 chapters 7h 25m
Start Learning

What you'll learn

  • Introduction to Tailwind CSS
  • Installing and Setting Up Tailwind CSS
  • Understanding Utility-First CSS
  • Tailwind CSS Typography and Text Utilities
  • Tailwind CSS Colors and Backgrounds
  • Tailwind CSS Spacing and Sizing
  • Tailwind CSS Flexbox Utilities
  • Tailwind CSS Grid Layouts

Course content

21 chapters · 7h 25m
  1. 1 Introduction to Tailwind CSS 15 min
  2. 2 Installing and Setting Up Tailwind CSS 15 min
  3. 3 Understanding Utility-First CSS 15 min
  4. 4 Tailwind CSS Typography and Text Utilities 20 min
  5. 5 Tailwind CSS Colors and Backgrounds 20 min
  6. 6 Tailwind CSS Spacing and Sizing 20 min
  7. 7 Tailwind CSS Flexbox Utilities 25 min
  8. 8 Tailwind CSS Grid Layouts 25 min
  9. 9 Tailwind CSS Borders and Shadows 15 min
  10. 10 Tailwind CSS Responsive Design 20 min
  11. 11 Tailwind CSS Hover and Focus States 15 min
  12. 12 Tailwind CSS Buttons and Components 25 min
  13. 13 Tailwind CSS Forms Styling 25 min
  14. 14 Tailwind CSS Navigation Bars and Menus 30 min
  15. 15 Tailwind CSS Cards and Dashboard UI 30 min
  16. 16 Tailwind CSS Dark Mode 20 min
  17. 17 Tailwind CSS Animations and Transitions 20 min
  18. 18 Tailwind CSS Customization and Configuration 20 min
  19. 19 Tailwind CSS Best Practices 15 min
  20. 20 Final Tailwind CSS Project 45 min
  21. 21 Tailwind CSS Bonus Resources 10 min