Bài 8. Tùy biến theme với @theme và biến CSS

Tailwind CSS v4 cấu hình ngay trong CSS: thêm màu thương hiệu, font chữ, breakpoint, khoảng cách, bóng đổ bằng khối @theme. Mỗi giá trị tự sinh lớp tiện ích tương ứng và đồng thời là biến CSS dùng được ở mọi nơi.

50 phútNâng cao
Bạn sẽ học được
  • Hiểu namespace của @theme: --color-*, --font-*, --breakpoint-*...
  • Thêm màu, font, breakpoint thương hiệu
  • Ghi đè hoặc xóa giá trị mặc định
  • Dùng biến theme trong CSS thường và giá trị tùy ý

Một số khái niệm

NamespaceSinh lớpVí dụ
--color-*bg-*, text-*, border-*...--color-brand-600: #2e7d32 → bg-brand-600
--font-*font-*--font-sans, --font-display
--text-*text-* (cỡ chữ)--text-tieu-de: 2.5rem
--spacingp-*, m-*, w-*... (bội số)--spacing: .25rem
--breakpoint-*sm:, md:...--breakpoint-3xl: 120rem
--radius-*rounded-*--radius-the: 1rem
--shadow-*shadow-*
--animate-*animate-*

Màu và font thương hiệu

/* style.css */
@import "tailwindcss";

@theme {
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --color-brand-50:  #e8f5e9;
  --color-brand-500: #43a047;
  --color-brand-600: #2e7d32;
  --color-brand-700: #1b5e20;
  --radius-the: 1rem;
  --breakpoint-3xl: 120rem;
}
/* Có ngay: bg-brand-600 text-brand-700 hover:bg-brand-500 rounded-the 3xl:grid-cols-6 */
<style type="text/tailwindcss">
  @theme { --color-brand-50: #e8f5e9; --color-brand-600: #2e7d32; --color-brand-700: #1b5e20; --radius-the: 1rem; }
</style>
<div class="max-w-xs rounded-the bg-brand-50 p-4 ring-1 ring-brand-600/30">
  <p class="font-semibold text-brand-700">Màu thương hiệu Tự Học Tin</p>
  <button class="mt-3 rounded-lg bg-brand-600 px-4 py-2 text-white hover:bg-brand-700">bg-brand-600</button>
</div>
Kết quả hiển thị

Trong ví dụ chạy trực tiếp (CDN), khối @theme đặt trong <style type="text/tailwindcss">; trong dự án thật đặt ở tệp CSS chính.

Ghi đè, xóa mặc định, dùng biến

@theme {
  --color-*: initial;          /* xóa toàn bộ bảng màu mặc định, chỉ giữ màu của bạn */
  --color-white: #fff;
  --color-brand: #2e7d32;
}
/* Mọi giá trị theme là biến CSS dùng được ở bất kỳ đâu */
.bieu-do { stroke: var(--color-brand); }
/* Giá trị tùy ý tham chiếu biến */
/* <div class="bg-(--color-brand)/20 shadow-[0_8px_24px_var(--color-brand)]"> */

Biến theme cũng giúp đồng bộ màu với thư viện biểu đồ, bản đồ, hoặc với CSS viết tay khác trong dự án.

Mẹo hay

Đặt tên màu theo vai trò (brand, accent, danger) hoặc theo thang 50–950 giống mặc định để đồng đội dễ đoán.

Lưu ý

tailwind.config.js của v3 vẫn dùng được qua @config "./tailwind.config.js"; nhưng dự án mới nên cấu hình bằng @theme.

Thực hành
  1. Thêm màu thương hiệu 5 sắc độ và font Be Vietnam Pro.
  2. Thêm breakpoint 3xl và dùng cho lưới 6 cột.
  3. Thêm bóng đổ và bo góc riêng cho thẻ.
  4. Dùng biến --color-brand trong một tệp CSS viết tay.
Tóm tắt bài học
  • v4 cấu hình bằng @theme trong CSS.
  • Namespace --color, --font, --breakpoint, --radius... sinh lớp tương ứng.
  • --*: initial để xóa mặc định.
  • Giá trị theme là biến CSS dùng mọi nơi.