Tailwind + shadcn/ui: setup chuẩn cho dự án vibe code

Trả lời nhanh: Tailwind CSS là cách viết giao diện bằng class tiện ích ngay trong HTML (flex gap-4 rounded-xl...) thay vì đặt tên và viết file CSS riêng; shadcn/ui là bộ component đẹp sẵn (nút, form, dialog...) copy thẳng mã nguồn vào dự án thay vì cài thư viện đóng hộp. Bộ đôi này thành mặc định của giới vibe code vì một lý do sâu: AI làm việc cực tốt với chúng, mọi style nằm ngay trong file component (agent nhìn một chỗ hiểu hết), và component là code của bạn (agent sửa được tận gốc).

Mở source một dự án AI-assisted bất kỳ năm 2026, xác suất rất cao bạn gặp Tailwind + shadcn/ui. Không phải trào lưu ngẫu nhiên: có lý do cấu trúc khiến cặp này ăn khớp đặc biệt với lối làm việc mô tả-cho-AI-dựng. Bài giải thích lý do đó, hướng dẫn setup chuẩn, và bộ quy ước nhỏ giúp agent của bạn cho ra giao diện nhất quán thay vì mỗi trang một kiểu.

Vì sao Tailwind hợp AI đến vậy

CSS truyền thống tách đôi ngữ cảnh: markup một file, style file khác, nối nhau bằng tên class tự đặt, AI (và người mới vào dự án) phải nhảy qua lại và đoán quan hệ. Tailwind gom về một: nhìn <div class="flex items-center gap-3 rounded-xl border p-4"> là thấy toàn bộ hình hài, không tra cứu, không side effect ẩn từ file CSS nào đó. Hệ quả cho vibe code: yêu cầu "nút to hơn, bo tròn hơn, đổi cam" được agent thực hiện chính xác tại chỗ, không lo sửa một class tên chung làm vỡ chỗ khác. Thêm nữa: Tailwind có bộ thang giá trị chuẩn (spacing, màu, cỡ chữ), chính bộ thang đó giữ giao diện AI sinh ra không bị lệch tông tự do.

Vì sao shadcn/ui khác, và hợp, hơn thư viện đóng hộp

Thư viện UI truyền thống (MUI, Ant...) là hộp đen trong node_modules: đẹp nhanh, nhưng tùy biến sâu là cuộc vật lộn với API override. shadcn/ui đi đường khác: npx shadcn add button chép mã nguồn nút vào components/ui của bạn, từ đó nó là code của dự án. Với agent, khác biệt là trời vực: "làm dialog này trượt từ cạnh phải và thêm bước xác nhận", agent mở thẳng file dialog.tsx của bạn ra sửa, thay vì đào tài liệu override của thư viện. Nền dưới là Radix (hành vi, accessibility chuẩn) + Tailwind (bề mặt), đẹp có gu sẵn, sở hữu trọn, không khóa vendor.

Setup chuẩn trong 10 phút

# du an Next.js/Vite da co (Tailwind cai theo huong dan framework, v4 chi mot dong import)
npx shadcn@latest init      # chon style, mau chu dao, sinh components.json + globals
npx shadcn@latest add button card input form dialog dropdown-menu
# component xuat hien trong components/ui/, mo ra doc duoc, sua duoc

Từ đây quy trình thêm UI: cần gì add nấy (hoặc bảo agent tự add), component phức hợp thì ghép từ các mảnh sẵn. Kho blocks chính chủ và cộng đồng có sẵn cả section hoàn chỉnh (pricing, dashboard), nguyên liệu cho agent lắp nhanh.

Bộ quy ước để agent làm UI nhất quán

Thêm mục này vào CLAUDE.md, năm dòng đổi lấy giao diện đồng bộ:

• Token: "màu chủ đạo primary đã cấu hình; bo góc rounded-xl; khoảng cách dùng thang 4/6/8; KHÔNG dùng màu tùy ý ngoài palette".
• Ưu tiên component có sẵn: "cần UI mới → tìm trong components/ui trước, thiếu thì shadcn add, tự viết là đường cuối".
• Một trang chuẩn: chỉ định một trang đã ưng làm mẫu, "mọi trang mới theo tông trang /dashboard", agent bắt chước cực giỏi khi có mẫu.
• Responsive mặc định: "mobile-first, kiểm tra breakpoint sm/md/lg".
• Dark mode nếu dùng: "luôn kèm biến thể dark: cho màu nền/chữ".

Thiếu quy ước, mỗi phiên agent một nét thẩm mỹ, cộng dồn thành app chắp vá. Có quy ước, 10 phiên vẫn một bàn tay.

Bộ quy ước để trợ lý làm giao diện nhất quán

# Dat trong tep quy uoc cua du an, tro ly doc moi lan lam viec

- Mau sac: chi dung bien mau da khai trong tep cau hinh, khong viet ma mau truc tiep
- Khoang cach: chi dung cac buoc 2, 4, 6, 8, 12, 16, khong dung so le
- Chu: chi dung 4 co chu da khai, khong tu them co moi
- Bo cuc: mobile truoc, cac diem ngat theo thu tu tu nho den lon
- Thanh phan: kiem thu muc thanh phan truoc khi tao moi, khong tao ban trung
- Trang thai: moi thanh phan co du trang thai binh thuong, dang tai, loi, rong
- Truy cap duoc: moi nut co nhan doc duoc, moi anh co mo ta
- Khong dung thu vien giao dien khac ngoai bo da chon

Dòng thứ năm là dòng quan trọng nhất trong thực tế: không có nó, trợ lý sẽ tạo một thành phần nút mới mỗi lần bạn nhờ làm một trang mới, và sau một tháng dự án có bảy phiên bản của cùng một cái nút.

Vì sao cách tiếp cận này hợp với trợ lý

Ba việc kiểm sau khi dựng

# 1. Kiem kich thuoc tep kieu dang sau khi dung
ls -lh dist/assets/*.css
# neu qua lon: kiem cau hinh quet noi dung da dung chua

# 2. Kiem cac lop khong duoc quet toi
# Lop sinh dong tu bien se bi bo qua, day la bay pho bien nhat
grep -rn "className={\`" src/ | head -20

# 3. Kiem thanh phan trung lap
find src/components -name "*.tsx" | xargs -n1 basename | sort | uniq -d

Bẫy phổ biến nhất: viết tên lớp bằng cách ghép chuỗi động thì công cụ không nhận ra và không sinh kiểu dáng tương ứng. Kết quả là giao diện trông đúng ở máy phát triển nhưng vỡ ở bản chạy thật. Luôn viết tên lớp đầy đủ, kể cả khi phải viết dài hơn.

Câu hỏi thường gặp

Tailwind làm HTML dài dòng khó đọc?

Cảm giác thật ở tuần đầu, đổi lấy việc không bao giờ phải đặt tên class và đoán side effect. Chuỗi class lặp thì gói vào component (đúng vai của shadcn), nơi trừu tượng hóa nên xảy ra, thay vì trong file CSS xa xôi.

Không biết CSS có dùng được bộ này với AI không?

Được ở mức ra sản phẩm nhìn ổn, agent + shadcn gánh phần thẩm mỹ nền. Nhưng biết đọc flexbox/spacing cơ bản giúp bạn nghiệm thu và mô tả chỉnh sửa chính xác hơn nhiều, một buổi học nền Tailwind là khoản đầu tư hời.

shadcn/ui có miễn phí thương mại không?

Có, mã nguồn mở, copy về là code của bạn, dùng thương mại thoải mái. Không phí, không khóa.

Đổi từ MUI/Bootstrap sang có đáng không?

Dự án đang chạy ổn: không cần đổi vì trend. Dự án mới, nhất là làm cùng AI: bộ Tailwind+shadcn là mặc định hợp lý, đúng tinh thần cả bài.

Bài viết liên quan

• Vibe coding với Claude: quy trình một người
• Vite là gì? Vì sao dev server nhanh như vậy
• VPS ổ Enterprise U.2 NVMe RAID 10 tại TND