Tailwind CSS v4 và CSS Variables: Thay Đổi Lớn Nhất

Tailwind CSS v4 vừa được công bố, và cộng đồng frontend đang tràn ngập những cuộc thảo luận sôi nổi. Bạn có bao giờ tự hỏi, điểm thay đổi nào sẽ làm thay đổi cách chúng ta viết CSS một cách căn bản? Hãy cùng khám phá thay đổi lớn nhất trong Tailwind v4 – việc tích hợp sâu CSS Variables – và xem nó sẽ mang lại gì cho dự án của bạn.

1. Tailwind v4 và CSS Variables: Khởi đầu mới

Tailwind v4 không chỉ là một bản nâng cấp nhẹ; nó đưa CSS Variables vào lõi của hệ thống utility. Điều này có nghĩa là mọi giá trị màu, spacing, font size… giờ đều có thể được định nghĩa dưới dạng biến và được tham chiếu lại trong các lớp utility. Nhờ đó, việc thay đổi toàn bộ giao diện chỉ cần một dòng cấu hình, thay vì chỉnh sửa từng lớp một.

“CSS Variables là tương lai của CSS, và Tailwind v4 đã biết cách khai thác sức mạnh này một cách thông minh.” – Adam Wathan

2. Thay đổi lớn nhất: Tích hợp CSS Variables trong toàn bộ core

Tailwind v4 chuyển mọi giá trị mặc định sang dạng biến, ví dụ:

// tailwind.config.js (v4)
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)', // <- CSS Variable
      secondary: 'var(--color-secondary)',
    },
    spacing: {
      sm: 'var(--spacing-sm)',
      md: 'var(--spacing-md)',
    },
  },
}

Những biến này được khai báo trong file CSS gốc:

:root {
  --color-primary: #3b82f6;
  --color-secondary: #f59e0b;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
}

Khi muốn thay đổi chủ đề chỉ cần cập nhật các giá trị trong :root, mọi lớp Tailwind sử dụng chúng sẽ tự động phản ánh thay đổi – một bước tiến lớn so với việc phải sửa từng giá trị trong tailwind.config.js.

3. Lợi ích của CSS Variables trong Tailwind

• Tùy biến động: Thay đổi màu, khoảng cách, font size chỉ bằng một biến.
• Hỗ trợ dark mode: Dễ dàng ghi đè biến trong @media (prefers-color-scheme: dark).
• Giảm kích thước bundle: Không cần tạo nhiều phiên bản cấu hình cho các theme khác nhau.
• Tối ưu cho design system: Các hệ thống thiết kế có thể quản lý token màu và spacing một cách thống nhất.

4. Cấu hình và sử dụng trong dự án thực tế

Bước 1: Định nghĩa CSS Variables

Tạo file variables.css và import vào dự án:

/* variables.css */
:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
  }
}

Bước 2: Kết nối với Tailwind

Trong tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        primaryHover: 'var(--color-primary-hover)',
      },
      spacing: {
        sm: 'var(--spacing-sm)',
        md: 'var(--spacing-md)',
      },
    },
  },
  plugins: [],
}

Bước 3: Sử dụng trong markup

<button class="bg-primary text-white hover:bg-primaryHover py-sm px-md rounded">
  Nhấn tôi
</button>

Nhờ các biến, khi thay đổi --color-primary trong CSS, tất cả nút có lớp bg-primary sẽ tự động cập nhật màu mới mà không cần chỉnh sửa lại Tailwind config.

5. So sánh Tailwind v3 và v4: Những điểm khác biệt rõ ràng

1. Cấu trúc theme: v3 dùng giá trị tĩnh; v4 chuyển sang var().
2. Quản lý theme: v3 yêu cầu tạo nhiều theme để hỗ trợ dark mode; v4 chỉ cần một @media trong CSS.
3. Kích thước bundle: v4 giảm đáng kể khi dùng nhiều theme vì các biến được tái sử dụng.
4. Tính mở rộng: Các plugin và custom utilities giờ có thể truy cập trực tiếp các CSS Variables.

“Việc chuyển sang CSS Variables không chỉ là cải tiến về mặt kỹ thuật mà còn thay đổi cách chúng ta suy nghĩ về thiết kế hệ thống.” – Sarah Drasner

6. Các lưu ý và Best Practices khi dùng Tailwind v4 + CSS Variables

• Đặt tên biến có ý nghĩa: Sử dụng tiền tố như --color- hoặc --spacing- để dễ quản lý.
• Tránh trùng lặp: Không khai báo cùng một giá trị cả trong tailwind.config.js và :root; chọn một nơi duy nhất.
• Kiểm tra fallback: Khi trình duyệt không hỗ trợ CSS Variables, cung cấp giá trị mặc định trong Tailwind config.
• Sử dụng @apply một cách hợp lý: Khi cần tạo component tùy chỉnh, vẫn có thể dùng @apply kết hợp với biến.

7. Tương lai và cộng đồng: Những gì đang chờ đón

Tailwind v4 mở ra một kỷ nguyên mới cho việc xây dựng design system linh hoạt. Các plugin sắp tới sẽ khai thác sâu hơn khả năng tạo theme động, và cộng đồng đã bắt đầu đóng góp các preset cho dark mode, high‑contrast, và thậm chí các theme dựa trên brand colors chỉ bằng một vài dòng CSS.

Ngoài ra, việc tích hợp CSS Variables còn giúp Tailwind giao tiếp tốt hơn với các framework khác như Vue, React, và Svelte, nơi biến CSS có thể được cập nhật qua state một cách trực tiếp.

Kết luận

Tailwind CSS v4 không chỉ là một bản nâng cấp nhẹ; việc đưa CSS Variables vào lõi là thay đổi mang tính cách mạng, giúp các nhà phát triển tùy biến giao diện nhanh chóng, giảm thiểu kích thước bundle và tạo ra các design system nhất quán hơn. Khi bạn áp dụng những nguyên tắc và best practices ở trên, dự án của bạn sẽ trở nên linh hoạt, bảo trì dễ dàng, và sẵn sàng cho mọi theme trong tương lai. Hãy thử ngay trong dự án tiếp theo và cảm nhận sức mạnh của Tailwind v4!