Bài 1. Tailwind CSS là gì? Tư duy utility-first

Một số khái niệm

Với CSS thuần bạn phải đặt tên class (.the-khoa-hoc) rồi viết CSS ở tệp khác; với Bootstrap bạn dùng thành phần dựng sẵn (.card). Tailwind cho bạn các viên gạch nhỏ theo một hệ thống thiết kế thống nhất (khoảng cách bội số 0.25rem, bảng màu 50–950, cỡ chữ xs–9xl) để tự ghép bất kỳ giao diện nào mà không rời HTML. Công cụ chỉ sinh ra CSS cho những lớp bạn thực sự dùng nên tệp CSS rất nhỏ.

Tailwind CSS v4 (2025, hiện là 4.x) viết lại hoàn toàn: engine Oxide nhanh hơn nhiều lần, cấu hình ngay trong CSS bằng @theme thay cho tailwind.config.js, chỉ cần một dòng @import "tailwindcss";, tự dò tệp nguồn, dùng tính năng CSS hiện đại (cascade layers, biến CSS, color-mix, container query).

So sánh ba cách viết cùng một nút

<!-- CSS thuần -->
<button class="nut">Đăng ký</button>
<style>.nut { padding: .5rem 1rem; background: #16a34a; color: #fff; border-radius: .5rem; font-weight: 600; }
.nut:hover { background: #15803d; }</style>

<!-- Bootstrap -->
<button class="btn btn-success">Đăng ký</button>

<!-- Tailwind CSS -->
<button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold">Đăng ký</button>

<div class="flex flex-wrap gap-3 items-center">
  <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold">Đăng ký</button>
  <button class="px-4 py-2 border-2 border-sky-600 text-sky-700 rounded-full hover:bg-sky-50">Xem thêm</button>
  <span class="inline-flex items-center gap-1 rounded-md bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Mới</span>
</div>

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

Vấn đề “HTML dài” được giải quyết bằng cách tách thành phần trong framework (React, Vue, Blade, PHP include) hoặc bằng vòng lặp, nên Tailwind đặc biệt hợp với React/Next.js.

Đọc một thẻ giao diện

<div class="max-w-sm rounded-2xl bg-white p-5 shadow-lg ring-1 ring-slate-200">
  <div class="flex items-center gap-3">
    <div class="grid size-12 place-items-center rounded-xl bg-green-100 text-xl font-bold text-green-700">TW</div>
    <div><h3 class="font-semibold text-slate-900">Tailwind CSS</h3><p class="text-sm text-slate-500">12 bài · Cơ bản đến nâng cao</p></div>
  </div>
  <p class="mt-4 text-slate-600">Thiết kế giao diện bằng lớp tiện ích, nhanh và nhất quán.</p>
  <a href="#" class="mt-4 inline-block rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Học ngay →</a>
</div>

Đọc lớp như đọc câu: max-w-sm chiều rộng tối đa nhỏ, rounded-2xl bo góc lớn, p-5 padding 1.25rem, shadow-lg bóng lớn, ring-1 viền mảnh, size-12 rộng cao 3rem.