HTML, CSS

🛠️ Tailwind CSS: Tùy Biến Components với @apply trong CSS

Posted on by Đỗ Thành
26
Th6
View: 24

Dưới đây là phần tiếp theo trong chuỗi học Tailwind CSS nâng cao, tập trung vào một kỹ thuật mạnh mẽ: tùy biến components với @apply trong CSS. Kỹ thuật này giúp bạn kết hợp nhiều utility class thành một class tùy chỉnh, giúp mã gọn gàng, dễ tái sử dụng, và chuẩn hóa giao diện toàn dự án.

🎯 Mục tiêu

  • Tìm hiểu @apply là gì và khi nào nên dùng
  • Tạo class tuỳ chỉnh tái sử dụng (custom components)
  • Tối ưu giao diện phức tạp mà vẫn tận dụng tối đa utility của Tailwind
  • Tạo base component: button, input, card, alert, badge,…

🔍 @apply là gì?

@apply là một directive của Tailwind cho phép bạn gom nhiều utility class lại thành một class riêng trong CSS.

✨ Tại sao nên dùng?

✅ Dễ tái sử dụng, đồng bộ UI
✅ Dễ bảo trì, tránh viết lại class lặp đi lặp lại
✅ Hữu ích khi làm việc với nhiều dự án hoặc team lớn

📦 Cách dùng @apply trong CSS

  1. Đảm bảo bạn đã có file CSS và đang dùng Tailwind build tool (PostCSS, Vite, Webpack, Next.js…).
  2. Viết class như sau:
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

  .input-field {
    @apply w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400;
  }

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

  .alert-success {
    @apply bg-green-100 text-green-700 border border-green-300 px-4 py-3 rounded;
  }
}

💡 Cách áp dụng trong HTML

<button class="btn-primary">Gửi</button>

<input type="text" class="input-field" placeholder="Nhập email..." />

<div class="card-box">
  <h3 class="text-xl font-semibold">Tiêu đề</h3>
  <p>Nội dung thẻ.</p>
</div>

<div class="alert-success">
  ✅ Cập nhật thành công!
</div>

📐 Tổ chức tốt hơn với cấu trúc component-based

Bạn có thể chia ra file CSS riêng cho từng component nếu dùng framework như Vue, React, Nuxt, Next… hoặc tách file SCSS:

src/
├─ components/
│  ├─ _button.css
│  ├─ _form.css
│  ├─ _alert.css
├─ styles.css (import tất cả)

🚫 Khi nào KHÔNG nên dùng @apply?

Trường hợpGiải thích
Với class động (hover:, lg:…) phức tạpTailwind đã hỗ trợ tốt, không cần gom
Khi class chỉ dùng 1 lầnKhông nên tạo @apply dư thừa
Khi muốn dùng logic động (JS)Ưu tiên dùng class thuần + điều kiện JS

🧪 Ví dụ thực tế: Nút + Thông báo chuẩn hóa

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

  .alert-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded;
  }
}


<button class="btn-danger">Xóa</button>

<div class="alert-error">
  ❌ Có lỗi xảy ra. Vui lòng thử lại.
</div>

✅ Kết luận

Với @apply, bạn có thể:

  • Chuẩn hóa toàn bộ UI: button, form, alert…
  • Giảm độ phức tạp của HTML (class ngắn gọn hơn)
  • Tái sử dụng dễ dàng khi làm nhiều dự án hoặc team lớn
  • Kết hợp Tailwind và phương pháp component hóa một cách mượt mà
Đỗ Thành