Tailwind CSS

UI/UX

UI/UXMiễn phíĐộ khó: Trung bình

Tailwind CSS

4.5/5Đánh giá của 2dm

Dựng giao diện nhanh, làm việc tốt với code do AI sinh ra.

Framework CSS dạng class tiện ích, dựng giao diện nhanh ngay trong HTML.

Mở trang chính thức Xem cách dùng

Giới thiệu

Tailwind CSS là framework CSS theo hướng utility-first: thay vì viết file CSS riêng cho từng thành phần, bạn ghép các class nhỏ như flex, pt-4, text-center ngay trong HTML để tạo giao diện. Tại thời điểm kiểm tra, trang tài liệu đang ở phiên bản v4.3.

Tailwind hỗ trợ responsive bằng tiền tố breakpoint (sm, md, lg, xl), chế độ tối bằng tiền tố dark:, và tùy biến màu, font qua biến CSS trong khối @theme. Khi build production, Tailwind loại bỏ phần CSS không dùng đến.

Đây là nền tảng giao diện của nhiều bộ component phổ biến như shadcn/ui, nên rất đáng học với đội làm web cho doanh nghiệp.

Tính năng nổi bật

Style ngay trong HTML

Ghép class tiện ích trực tiếp trên thẻ, không phải chuyển qua lại giữa nhiều file CSS.

Responsive dễ dàng

Thêm tiền tố breakpoint trước class để đổi giao diện theo kích thước màn hình.

Dark mode sẵn có

Dùng tiền tố dark: để khai báo màu cho giao diện tối.

Chỉ xuất CSS đang dùng

Phần CSS thừa bị loại khỏi bản production, giúp trang tải nhanh.

Design token qua biến CSS

Khai báo màu, font thương hiệu trong khối @theme để dùng thống nhất toàn dự án.

Dùng để làm gì

Landing page chiến dịch

Marketer và dev dựng nhanh trang bán hàng, chỉnh bố cục mobile ngay trong HTML.

Website doanh nghiệp

Định nghĩa màu và font thương hiệu một lần, dùng lại cho mọi trang.

Trang quản trị nội bộ

Kết hợp với bộ component như shadcn/ui để có giao diện đồng bộ.

Giao diện sáng tối

Hỗ trợ người dùng thích chế độ tối mà không phải viết lại stylesheet.

Cách dùng

1
Tạo dự án Vite
Nếu chưa có dự án, tạo mới bằng Vite rồi chuyển vào thư mục dự án.
$npm create vite@latest my-project
2
Cài Tailwind và plugin Vite
Cài gói tailwindcss cùng plugin dành cho Vite.
$npm install tailwindcss @tailwindcss/vite
3
Khai báo plugin
Thêm tailwindcss() vào mảng plugins trong file vite.config.ts.
4
Import Tailwind vào CSS
Thêm dòng @import "tailwindcss"; vào file CSS chính, ví dụ src/style.css.
5
Chạy và dùng class
Khởi động dev server rồi bắt đầu thêm class tiện ích vào HTML.
$npm run dev

Video hướng dẫn

Tailwind CSS v4 Full Course 2026 Master Tailwind in One Hour
JavaScript Mastery

Tailwind CSS v4 for Beginners Full Course 2026
Coder Coder

Tailwind CSS v4.1: Text shadows, masks, and tons more
Tailwind Labs

Ví dụ thực tế

Tình huống minh hoạ

Một trung tâm tiếng Anh ở Hà Nội cần landing page tuyển sinh hiển thị tốt trên điện thoại vì phần lớn phụ huynh xem qua Facebook. Lập trình viên tạo dự án Vite, cài Tailwind, khai báo màu xanh thương hiệu và font chữ trong khối @theme. Khi cần đổi bố cục từ một cột trên mobile sang hai cột trên máy tính, anh chỉ thêm tiền tố md: vào class, không phải mở file CSS riêng.

Mẹo & lưu ý

Khai báo token thương hiệu sớm
Đặt màu, font trong @theme ngay từ đầu để cả đội dùng đúng giá trị.
Thiết kế mobile trước
Viết class cho màn hình nhỏ trước, sau đó dùng sm, md, lg cho màn hình lớn hơn.
Xem hướng dẫn theo framework
Với Next.js, Laravel, Nuxt... hãy dùng hướng dẫn cài đặt riêng trên trang tài liệu.