Bài 3: Cấu trúc class cơ bản và cách Tailwind hoạt động

Sau khi bạn đã cài đặt Tailwind CSS, câu hỏi tiếp theo là: Làm sao để sử dụng nó một cách hiệu quả? Trong bài học hôm nay, chúng ta sẽ bắt đầu khám phá cách Tailwind hoạt động thông qua hệ thống class tiện ích (utility classes) — cốt lõi của framework này. Bạn sẽ hiểu được cú pháp của Tailwind, cách tổ chức class, và làm quen với nguyên tắc kết hợp nhiều lớp nhỏ để tạo ra một giao diện hoàn chỉnh. Ngoài ra, ta sẽ so sánh với cách viết CSS truyền thống để bạn thấy rõ sự khác biệt.

---

Cấu trúc class trong Tailwind

Trong Tailwind, mỗi class đại diện cho một thuộc tính CSS cụ thể. Cách tổ chức class luôn theo quy tắc sau:

📋 Copy[property]-[value]

Ví dụ:

Class	Tác dụng
text-center	text-align: center;
bg-red-500	background-color: #ef4444;
mt-4	margin-top: 1rem;
px-2	padding-left và padding-right: 0.5rem
rounded-lg	border-radius: 0.5rem;

Bạn không cần nhớ mã màu hay giá trị số — chỉ cần dùng class đúng cú pháp, Tailwind đã định nghĩa tất cả sẵn.

---

Ví dụ minh họa

Ví dụ 1: Một thẻ tiêu đề

📋 Copy<h1 class="text-2xl font-bold text-gray-800">
  Xin chào Tailwind CSS
</h1>

Giải thích:

• text-2xl: chữ lớn
• font-bold: in đậm
• text-gray-800: màu chữ xám đậm

---

Ví dụ 2: Nút đơn giản

📋 Copy<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Bấm vào đây
</button>

Giải thích:

• bg-blue-500: nền xanh cấp độ 500
• text-white: chữ trắng
• px-4, py-2: padding ngang 1rem, dọc 0.5rem
• rounded: bo góc nhẹ

---

So sánh với CSS truyền thống

CSS truyền thống	Tailwind CSS
Viết CSS riêng, đặt tên class	Gắn trực tiếp class tiện ích vào HTML
Tái sử dụng tốt, nhưng dễ phát sinh class trùng lặp	Tái sử dụng qua tổ hợp class
Cần nhớ cú pháp CSS chuẩn, thuộc tính, giá trị	Sử dụng theo cú pháp nhất quán

Ví dụ:

CSS thuần:

📋 Copy.btn {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

Tailwind:

📋 Copy<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Gửi
</button>

---

Tổ hợp nhiều class

Bạn có thể kết hợp rất nhiều class vào một thẻ HTML:

📋 Copy<div class="bg-white shadow-lg p-6 rounded-lg w-full max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-2">Thông báo</h2>
  <p class="text-gray-600">Bạn đã học xong bài số 3!</p>
</div>

Tailwind không giới hạn số class — bạn chỉ cần gõ đúng tên class là có thể tạo được giao diện mong muốn.

---

Tổng kết kiến thức

Loại class	Mô tả chức năng
text-*	Thiết lập kiểu chữ, màu sắc
bg-*	Nền
m-*, p-*	Margin, Padding
rounded, shadow	Hiệu ứng bo góc, đổ bóng
flex, grid	Hệ thống bố cục (sẽ học ở phần 2)

---

Tóm tắt bài học

• Tailwind sử dụng cú pháp [thuộc tính]-[giá trị] để đại diện cho các lớp tiện ích nhỏ.
• Mỗi class làm một việc cụ thể, bạn có thể kết hợp nhiều class để tạo giao diện hoàn chỉnh.
• So với CSS truyền thống, bạn không cần viết tên class riêng hay file CSS mới — tất cả thao tác đều trên HTML.