Mục lục khóa học Tailwind CSS – 30 bài học

Phần 1: Làm quen với Tailwind CSS

1. Giới thiệu Tailwind CSS và triết lý utility-first
2. Cách cài đặt Tailwind CSS vào dự án (CDN và build tool)
3. Cấu trúc class cơ bản và cách Tailwind hoạt động
4. So sánh Tailwind với CSS thuần và framework khác (Bootstrap, v.v.)
5. Cách viết layout với các lớp margin, padding
6. Hệ thống màu sắc trong Tailwind
7. Typography: font, size, weight, line-height
8. Responsive design trong Tailwind
9. Pseudo-class (hover, focus, active…) trong Tailwind
10. Thực hành: tạo trang landing đơn giản với Tailwind

Phần 2: Xây dựng layout và bố cục

11. Sử dụng Flexbox trong Tailwind
12. Sử dụng Grid layout
13. Các lớp hiển thị (display, visibility, z-index)
14. Chiều rộng, chiều cao và giới hạn (min/max)
15. Làm việc với background và border
16. Bo góc, shadow, và hiệu ứng đổ bóng
17. Hệ thống spacing nâng cao
18. Position (relative, absolute, fixed, sticky)
19. Layering và thứ tự hiển thị (z-index, order)
20. Thực hành: layout card sản phẩm responsive

Phần 3: Tương tác và hiệu ứng

21. Transition và animation trong Tailwind
22. Trạng thái tương tác nâng cao (group-hover, focus-within…)
23. Dark mode trong Tailwind
24. Form control: input, button, select, checkbox
25. Responsive visibility và breakpoint nâng cao
26. Tùy biến theme với Tailwind Config
27. Tái sử dụng class với @apply và component
28. Cách tổ chức Tailwind trong dự án lớn
29. Thực hành: tạo form liên hệ có responsive và hiệu ứng
30. Tổng kết khóa học + bài tập thực hành cuối khóa