Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Tailwind CSS v4 - Beginner to Pro

Tailwind CSS v4 - Từ Cơ Bản Đến Chuyên Gia

Tailwind CSS v4 - Từ Cơ Bản Đến Chuyên Gia

Tailwind CSS - Xây dựng trang web lễ hội âm nhạc dễ dàng và học cách tùy chỉnh, mở rộng Tailwind CSS!

4.6
(1,095 đánh giá)
6,228 học viên
Giảng viên
Tom Phillips
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
4.0 giờ video
71 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Nâng cao giá trị bản thân với tư cách là một lập trình viên Front-end
Xây dựng một Landing Page với Tailwind CSS
Mở rộng theme mặc định và tùy chỉnh Tailwind CSS
Tạo hiệu ứng chuyển động (animation) tùy chỉnh với Tailwind CSS

Yêu cầu

Hiểu biết cơ bản về HTML & CSS
Đã cài đặt phiên bản Node và npm mới nhất

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

Dành cho lập trình viên web ở mọi cấp độ muốn nâng cao giá trị bằng cách học một phương pháp styling ứng dụng và website tiên tiến hơn

Nội dung khóa học

7 phần • 34 bài giảng
1 Giới thiệu và Demo dự án Tailwind CSS
2 Quan trọng! Hãy đọc phần này trước khi bắt đầu khóa học! (GitHub repo, v.v.)
3 Thiết lập trình soạn thảo cho Tailwind CSS
4 Đánh giá & Nhận xét trên Udemy
5 Thiết lập dự án Tailwind CSS
6 Tổng quan về Tailwind CSS
7 Cách nhận trợ giúp trong khóa học này
1 Tạo Navbar và Logo (căn chỉnh khoảng cách, flexbox & gradient trong Tailwind)
2 Áp dụng Google Fonts vào dự án Tailwind CSS
3 Tạo mục menu đầu tiên, thêm class khi hover và thêm hiệu ứng chuyển tiếp (transition)
4 Hoàn thiện các mục menu, kỹ thuật chỉnh sửa & các component Tailwind CSS
5 Tạo các mục menu phụ & sử dụng tính năng group của Tailwind CSS
6 Tạo biểu tượng menu cho phiên bản di động
7 Tạo hiệu ứng chuyển động cho biểu tượng menu di động & tạo biến thể (variant) tùy chỉnh trong Tailwind CSS
8 Mở rộng biến thể tùy chỉnh 'open' & triển khai chức năng menu di động
9 Triển khai menu phụ trên di động với biến thể tùy chỉnh 'peer open'
1 Tạo phần Hero và hình nền
2 Thêm nội dung cho phần Hero
3 Tạo hiệu ứng chuyển động logo dạng sóng (waveform) trong Tailwind CSS
4 Tạo lớp tiện ích (utility class) tùy chỉnh cho độ trễ hiệu ứng chuyển động
1 Kiểu dáng mặc định (base styles) cho các thẻ tiêu đề trong Tailwind CSS
2 Tạo một Carousel có thể cuộn và bắt điểm (snappable) trong Tailwind CSS
3 Thêm mũi tên điều hướng trái/phải cho Carousel
1 Triển khai chế độ sáng/tối dựa trên cài đặt máy cục bộ trong Tailwind CSS
2 Triển khai chế độ sáng/tối với nút chuyển đổi trong Tailwind CSS
1 Tạo bảng giá vé
2 Bắt đầu phần lịch trình biểu diễn (với gradient nâng cao trong Tailwind CSS)
3 Hoàn thiện phần lịch trình biểu diễn
1 Lớp tiện ích 'size' cho chiều cao và chiều rộng bằng nhau trong Tailwind
2 Màu chữ gradient trong Tailwind CSS
3 Tên lớp tiện ích Tailwind CSS tùy chỉnh nâng cao
4 Bố cục nâng cao với container trong Tailwind CSS
5 Upload code lên GitHub và triển khai lên Vercel
6 PHẦN THƯỞNG!

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

This course is has been updated to Tailwind CSS v4.

Improve your skills and increase your value as a front end web developer by learning the ins and outs of Tailwind CSS!

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

No more trying to think of appropriate class names, no more creating wrapper classes and inner classes, no more wasting resources with unecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimisation out of the box. Not using a particular class in your HTML files? Then Tailwind CSS won't include it in the final build of your CSS!

In this course we'll be creating a mobile-first landing page for a music festival website. We'll be covering layouts with flexbox and grid, Hero and Navbar components with menu and sub menu items, targeting different states like hover and focus states, targeting different screen sizes, and extending beyond Tailwind's built-in theme and classes.

After getting comfortable with Tailwind CSS's utility classes, we'll be creating our own base, utility, and component classes! This course is packed with an incredible amount of value in such a short amount of time!

Increase your value as a front end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Css Frameworks
Hiển thị tất cả khoá học Front End Development
Hiển thị tất cả khoá học Tailwind Css
Hiển thị tất cả khoá học Web Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊