Phần 1: Làm quen với Tailwind CSS
- Giới thiệu Tailwind CSS và triết lý utility-first
- Cách cài đặt Tailwind CSS vào dự án (CDN và build tool)
- Cấu trúc class cơ bản và cách Tailwind hoạt động
- So sánh Tailwind với CSS thuần và framework khác (Bootstrap, v.v.)
- Cách viết layout với các lớp margin, padding
- Hệ thống màu sắc trong Tailwind
- Typography: font, size, weight, line-height
- Responsive design trong Tailwind
- Pseudo-class (hover, focus, active…) trong Tailwind
- 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
- Sử dụng Flexbox trong Tailwind
- Sử dụng Grid layout
- Các lớp hiển thị (display, visibility, z-index)
- Chiều rộng, chiều cao và giới hạn (min/max)
- Làm việc với background và border
- Bo góc, shadow, và hiệu ứng đổ bóng
- Hệ thống spacing nâng cao
- Position (relative, absolute, fixed, sticky)
- Layering và thứ tự hiển thị (z-index, order)
- Thực hành: layout card sản phẩm responsive
Phần 3: Tương tác và hiệu ứng
- Transition và animation trong Tailwind
- Trạng thái tương tác nâng cao (group-hover, focus-within…)
- Dark mode trong Tailwind
- Form control: input, button, select, checkbox
- Responsive visibility và breakpoint nâng cao
- Tùy biến theme với Tailwind Config
- Tái sử dụng class với @apply và component
- Cách tổ chức Tailwind trong dự án lớn
- Thực hành: tạo form liên hệ có responsive và hiệu ứng
- Tổng kết khóa học + bài tập thực hành cuối khóa
Thảo luận
1 bình luận
A WordPress Commenter
Tháng 7 12, 2025Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.