Login

Tailwind CSS cho người mới: tư duy utility-first và cách bắt đầu

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Tailwind CSS là framework CSS theo hướng utility-first: thay vì viết file CSS riêng với tên class tự đặt, bạn ghép các class nhỏ có sẵn ngay trong HTML. Ban đầu cách này có vẻ lạ, nhưng nhiều đội thấy nó giúp xây giao diện nhanh và nhất quán. Bài này giúp bạn hiểu tư duy và bắt đầu.

Utility-first nghĩa là gì?

Với CSS truyền thống, bạn đặt tên class theo ý nghĩa rồi viết quy tắc:

.nut-chinh {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

Với Tailwind, mỗi class làm một việc rất nhỏ và bạn ghép chúng lại:

<button class='bg-blue-600 text-white px-4 py-2 rounded-lg'>
  Đăng ký
</button>

Tailwind quét mã nguồn, chỉ tạo ra CSS cho những class bạn thật sự dùng, nên file CSS cuối cùng thường khá nhỏ.

Cài đặt nhanh

Cách cài thay đổi theo phiên bản, nên hãy làm theo hướng dẫn mới nhất trên trang tài liệu chính thức của Tailwind cho công cụ bạn dùng (Vite, Next.js...). Với dự án bắt đầu từ create-next-app, bạn thường có thể chọn Tailwind ngay trong lúc khởi tạo. Để thử nghiệm nhanh một ý tưởng, bạn cũng có thể dùng bản nạp qua CDN dành cho môi trường thử nghiệm, nhưng không nên dùng nó cho sản phẩm thật.

Các nhóm class thường dùng

  • Khoảng cách: p-4 (padding), px-6 (trái phải), mt-2 (margin top), gap-4. Thang số mặc định mỗi đơn vị bằng 0.25rem, tức p-4 là 1rem.
  • Chữ: text-lg, font-bold, text-gray-700, leading-relaxed, text-center.
  • Màu: bg-white, text-blue-600, border-gray-200, với thang độ đậm từ 50 đến 950.
  • Bố cục: flex, grid, grid-cols-3, items-center, justify-between.
  • Kích thước: w-full, max-w-md, h-10, min-h-screen.
  • Viền, bóng: border, rounded-xl, shadow-md.

Ví dụ: thẻ khóa học

<article class='max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-sm'>
  <h3 class='text-lg font-semibold text-gray-900'>HTML và CSS cơ bản</h3>
  <p class='mt-2 text-sm leading-relaxed text-gray-600'>
    Học cách dựng trang web đầu tiên từ con số không.
  </p>
  <div class='mt-4 flex items-center justify-between'>
    <span class='font-bold text-blue-600'>Miễn phí</span>
    <a href='#' class='rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700'>
      Xem khóa học
    </a>
  </div>
</article>

Bạn không rời khỏi file HTML để viết CSS, không phải nghĩ tên class, và giao diện được mô tả ngay tại chỗ.

Trạng thái với tiền tố

Tailwind dùng tiền tố để áp dụng class theo trạng thái:

  • hover:bg-blue-700: khi rê chuột.
  • focus:ring-2: khi có focus, quan trọng cho khả năng tiếp cận bàn phím.
  • disabled:opacity-50: khi bị vô hiệu hóa.
  • md:flex, lg:grid-cols-3: theo kích thước màn hình (sẽ nói ở bài sau).
  • first:mt-0, odd:bg-gray-50: theo vị trí.
  • transition, duration-200: chuyển động mượt.

Trùng lặp thì sao?

Nỗi lo phổ biến là class dài và lặp lại. Cách xử lý đúng là đóng gói thành component (trong React, Vue...) thay vì sao chép HTML. Nút bấm xuất hiện ở năm nơi thì chỉ có một component Nut chứa chuỗi class đó. Nếu thật sự cần, Tailwind cho phép gom class bằng @apply trong CSS, nhưng thường nên tránh lạm dụng.

Ưu và nhược điểm

Ưu điểm:

  • Tốc độ viết nhanh, ít phải chuyển qua lại giữa file.
  • Hệ thống thiết kế có sẵn (khoảng cách, màu, cỡ chữ) giúp giao diện nhất quán.
  • Xóa một phần tử là xóa luôn CSS của nó, không để lại mã chết.
  • Không lo xung đột tên class hay specificity.

Nhược điểm:

  • HTML trông dài, cần thời gian làm quen và học tên class.
  • Vẫn cần hiểu CSS; Tailwind chỉ là cách viết, không thay thế kiến thức nền.
  • Chuỗi class dài cần công cụ định dạng và sắp xếp (có plugin chính thức cho Prettier).

Lời khuyên cho người mới

  1. Hãy học CSS cơ bản trước, rồi mới dùng Tailwind. Bạn sẽ hiểu flex, px-4 thực chất là gì.
  2. Cài tiện ích IntelliSense cho VS Code để có gợi ý class và xem CSS tương ứng khi rê chuột.
  3. Tra cứu tài liệu chính thức, nó có ô tìm kiếm rất tiện để dò tên class.
  4. Khi cần giá trị đặc biệt, dùng giá trị tùy ý như w-[320px] thay vì viết CSS riêng.

Làm quen bằng cách dựng lại một giao diện có sẵn

Cách học Tailwind nhanh nhất là nhìn một giao diện quen thuộc, ví dụ thanh điều hướng hoặc thẻ giá tiền, rồi thử dựng lại. Bạn sẽ nhanh chóng nhớ các class thường dùng. Trong quá trình đó, hãy mở DevTools để xem CSS mà từng class sinh ra, bạn sẽ thấy mọi thứ chỉ là CSS thuần quen thuộc, không có gì bí ẩn. Đừng cố học thuộc toàn bộ danh sách class, hãy tra cứu khi cần, cơ bắp sẽ tự ghi nhớ sau vài dự án.

Kết luận

Tailwind không phải phép màu, nó là một cách viết CSS khác: nhỏ, nhất quán và đặt ngay trong mã giao diện. Nếu bạn đã vững CSS, hãy thử dùng nó cho một trang nhỏ rồi tự đánh giá xem nó có hợp với mình không.

Để xây giao diện đẹp và nhanh bằng Tailwind trong các dự án thực tế, bạn có thể tham khảo khóa học trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment