Bài 27: Tái sử dụng class với @apply và component – tổ chức CSS gọn gàng, thông minh

Bài hôm nay sẽ giúp bạn bước vào vùng đất mà nhiều dev Tailwind “thích thú” nhưng cũng không khỏi thắc mắc lúc ban đầu: làm sao để không phải viết đi viết lại cùng một đống class dài dằng dặc?

Câu trả lời nằm ở: @apply và component CSS.

Bạn đã quen với việc viết class trực tiếp trong HTML như sau:

📋 Copy<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
  Gửi
</button>

Nhưng nếu có 5 nút giống hệt như vậy, bạn sẽ phải lặp lại đoạn class này… 5 lần.
Thế là bạn nghĩ ngay: “Giá mà mình có thể gộp mấy cái này lại thành một class btn và dùng thôi…”

Tin vui là: Tailwind cho phép bạn làm điều đó thông qua @apply.
Bài học hôm nay sẽ giúp bạn:

• Hiểu cách dùng @apply trong CSS để tạo class tùy chỉnh
• Tổ chức component trong file riêng
• Cách dùng @layer và phân tách logic rõ ràng

---

@apply – gộp nhiều utility class vào một class

Khi dùng Tailwind với công cụ build (như PostCSS hoặc Vite), bạn có thể viết CSS như sau:

📋 Copy/* styles.css */
.btn {
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition;
}

.btn-outline {
  @apply border border-blue-600 text-blue-600 bg-white hover:bg-blue-50;
}

Sau đó, bạn dùng trong HTML như bình thường:

📋 Copy<button class="btn">Nút thường</button>
<button class="btn-outline">Nút viền</button>

Tailwind sẽ biên dịch class btn thành toàn bộ style tương ứng với class gốc.

---

Dùng với @layer components để rõ ràng hơn

Tailwind có 3 layer mặc định:

• base – reset CSS, mặc định toàn cục
• components – class tùy chỉnh dạng component
• utilities – class tiện ích (như bạn dùng mỗi ngày)

Khi thêm component, bạn nên viết trong block @layer components:

📋 Copy@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply bg-indigo-600 text-white py-2 px-4 rounded transition hover:bg-indigo-700;
  }

  .card {
    @apply bg-white shadow-md rounded p-6;
  }

  .badge {
    @apply inline-block text-sm px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full;
  }
}

Đây là cách tổ chức sạch sẽ và tương thích với Tailwind.

---

Khi nào nên dùng @apply?

Nên dùng:

• Với class dùng lại nhiều lần (nút, thẻ card, badge…)
• Khi cần tổ chức style gọn gàng trong file riêng
• Khi kết hợp với component framework (React, Vue…)

Không nên dùng:

• Với các class logic/phức tạp (hover:bg-..., md:grid-cols-3) lồng nhau quá nhiều
• Khi không có công cụ build hỗ trợ PostCSS

---

Gợi ý cách tổ chức component trong dự án

Bạn có thể tách file components.css hoặc styles.css riêng, và import trong file main:

📋 Copy// tailwind.config.js
content: ["./src/**/*.{html,js}"],

// trong src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700;
  }

  .alert-success {
    @apply bg-green-100 text-green-800 border border-green-200 px-4 py-2 rounded;
  }
}

Cứ thế, bạn xây dựng thư viện component riêng bằng chính Tailwind.

---

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

Mục đích	CSS thuần	Tailwind với @apply
Gộp class nút	.btn { ... }	.btn { @apply bg-*, text-* }
Component badge	.badge { background:... }	.badge { @apply bg-*, rounded }
Quản lý style logic	CSS Module / BEM / SCSS	Tailwind + @layer components

---

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

Kỹ thuật	Mô tả
@apply	Gộp nhiều utility class thành 1 class tùy chỉnh
@layer	Tổ chức các class theo nhóm (components, base)
component	Class tái sử dụng như btn, card, badge
Khi dùng	Khi cần tối ưu, tái sử dụng, tổ chức rõ ràng

---

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

• Tailwind không chỉ là hệ thống tiện ích – nó có thể trở thành framework component nếu bạn biết dùng @apply.
• Bạn có thể tạo các class riêng cho nút, thẻ, badge, v.v., vừa gọn gàng vừa dễ bảo trì.
• Khi dự án lớn lên, việc tách style ra @layer components là chiến lược rất thông minh.

---

Bài tiếp theo

Bây giờ bạn đã có class tái sử dụng, theme riêng, màu sắc thương hiệu…
Câu hỏi tiếp theo là: khi dự án phình to, tổ chức file, cấu trúc Tailwind sao cho gọn?

Trong bài 28, bạn sẽ học:

• Cách tổ chức folder, style, component trong dự án lớn
• Cách làm việc nhóm với Tailwind
• Một vài gợi ý cấu trúc thực tế từ cộng đồng

---

Hẹn bạn trong bài 28: Cách tổ chức Tailwind trong dự án lớn – giữ code sạch, dễ mở rộng và làm nhóm hiệu quả.
Đây là lúc bạn bắt đầu “think like a team”!