Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k. Số lượng có hạn!
Trang chủ
Menu

Làm chủ TailwindCSS với các Dự án thực tế

Làm chủ TailwindCSS với các Dự án thực tế

Lý thuyết ngắn gọn, thực hành chi tiết, vận dụng kiến thức vào thiết kế và viết mã cho các dự án thực tế

5.0
(343 đánh giá)
1,372 học viên
Giảng viên
Anh Nguyễn Ngọc
Đánh giá cao
79.000đ 429.000đ -82%
7.5 giờ video
1 bài quiz
18 tài nguyên
4 bài viết
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 28/04/2026

Bạn sẽ học được gì

Nắm được các khái niệm và kỹ thuật cơ bản cũng như nâng cao của TailwindCSS
Cấu hình và thực hiện dự án web với TailwindCSS
Nắm và vận dụng được kiến thức TailwindCSS cho các dự án thực tế
Thực hiện tùy biến các thành phần của TailwindCSS
Làm quen với các mẹo, kỹ thuật thiết kế và lập trình với TailwindCSS

Yêu cầu

Cần có kiến thức rất cơ bản bản về thiết kế WEB
Cần có kiến thức rất cơ bản bản về HTML, CSS, Javascript

Đối tượng phù hợp

Học sinh, sinh viên, và những bạn yêu thích thiết kế và phát triển web với TailwindCSS
Các nhà phát triển mong muốn tìm tìm kiếm một nền tảng thiết kế giao diện mạnh mẽ và nhanh chóng cho dự án
Những bạn mong muốn vận dụng các kiến thức TailwindCSS vào dự án thực tế

Nội dung khóa học

8 phần • 70 bài giảng
1 Giới thiệu về TailwindCSS
2 Cài đặt NodeJS và NPX
3 Cài đặt IDE: Visual Studio Code
4 Cài đặt các extension dùng phát triển TailwindCSS trong Visual studio code
5 Liên kết TailwindCSS thông qua CDN
6 Cấu hình TailwindCSS thông qua CLI
7 Cấu hình TailwindCSS thông qua PostCSS & Vite
1 Giới thiệu phần học
2 @tailwind directive (Chỉ thị) trong TailwindCSS
3 Kích thước font chữ
4 Màu nền và màu chữ
5 Padding (Vùng đệm) và Margin (Lề)
6 Lớp width (Chiều rộng)
7 Lớp height (Chiều cao)
8 Border (Đường viền)
9 Tiện ích outline và ring
10 Hiệu ứng đổ bóng (shadow)
11 Mã nguồn tham khảo
1 Giới thiệu phần học
2 Tạo dự án GoogleClone với TailwindCSS
3 Tạo dự án GoogleClone với TailwindCSS - phần 2
4 Tạo phần Header
5 Tạo Main section
6 Tạo Main section - Phần 2
7 Tạo phần Footer (Chân trang)
8 Mã nguồn tham khảo
1 Giới thiệu phần học
2 Tạo NavBar cho LandingPage
3 Thiết kế Responsive cho NavBar
4 Viết mã Javascript ẩn/hiện menu trong mobile mode
5 Thiết kế và tạo phần Hero
6 Thiết kế và tạo phần Main
7 Thiết kế và tạo phần Main: Bổ sung thành phần và responsive
8 Tạo và thiết kế phần Pricing
9 Thiết kế và tạo phần Pricing - phần 2
10 Thiết kế và tạo phần Pricing - phần 3: Bổ sung thành phần và responsive
11 Thiết kế phần Featured Stories
12 Thiết kế phần Featured Stories - Phần 2: bổ sung thành phần và responsive
13 Thiết kế và tạo phần Footer (Chân trang)
14 Mã nguồn tham khảo
1 Giới thiệu phần học
2 Tạo dự án Instagram với TailwindCSS
3 Tạo NavBar
4 Bổ sung Responsive cho NavBar
5 Thiết kế và tạo Header (Tiêu đề trang)
6 Thiết kế và tạo Header - Phần 2
7 Tạo Profile numbers cho di động
8 Tạo instagram icons
9 Thiết kế và tạo phần Posts
1 Giới thiệu phần học
2 Tạo dự án Github với TailwindCSS
3 Thiết kế NavBar
4 Thiết kế Responsive cho Navbar
5 Thiết kế menu responsive cho Navbar
6 Thiết kế Profile - Phần 1
7 Thiết kế Profile - phần 2
8 Thiết kế phần Main
9 Thiết kế phần Respositories
10 Thiết kế Respositories - phần 2
11 Thiết kế Footer (Chân trang)
1 Giới thiệu phần học
2 Tạo dự án GitHub
3 Thiết kế Left sidebar
4 Thiết kế Left sidebar - phần 2
5 Thiết kế Main
6 Thiết kế Main - Phần 2
7 Thiết kế hộp tìm kiếm
8 Thiết kế phần Trending
9 Thiết kế phần Following
1 Bonus lecture

Giới thiệu khóa học

Khi thiết kế và phát triển các dự án web, yêu cầu đầu tiên là làm thế nào để thiết kế và hoàn thiện được một giao diện web chuyên nghiệp, nhanh chóng và có khả năng đáp ứng (responsive). TailwindCSS là lựa chọn phù hợp cho các nhà thiết kế, phát triển Web.


TailwindCSS là nền tảng CSS mã nguồn mở. Đặc tính chính, không giống với các nền tảng CSS khác như Bootstrap, TailwindCSS không cung cấp các lớp định nghĩa trước của các thành phần như button (nút nhấn) hay tables (bảng). Thay vào đó, tạo ra các lớp CSS tiện ích có thể dùng định kiểu cho các thành phần HTML khi nào cần. Các lớp tiện ích CSS có thể dùng kết hợp với nhau để tạo ra các giao diện cực kỳ nhanh chóng vào chuyên nghiệp,


Với mong muốn đưa TailwindCSS đến với các nhà thiết kế Web, nhà phát triển và các dự án; những bạn học sinh, sinh viên khi làm dự án, khóa học Làm chủ TailwindCSS với các dự án thực tế ra đời. Nội dung của khóa học theo lộ trình cung cấp kiến thức cơ bản của TailwindCSS, tiếp đến là vận dụng vào các đề tài dự án thực tế dựa theo các trang web nỗi tiếng như: Instagram, Twitter, Github, Google.


Ngoài các kiến thức lập trình, khóa học còn cung cấp các kỹ năng lập trình, công cụ và các tips (Mẹo) hay khi làm việc với TailwindCSS.


Hẹn gặp các bạn trong khóa học với những trãi nghiệm tốt nhất


Học viên thường mua kèm

VIP MEMBERSHIP

Truy cập toàn bộ khóa học chỉ với một lần đăng ký, thời hạn vĩnh viễn

Trở thành thành viên VIP để truy cập không giới hạn tất cả khóa học trên nền tảng, miễn phí cập nhật khoá học mới

Tìm hiểu thêm về VIP
Zalo
Bạn cần hỗ trợ?