Mastering Tailwind CSS v4.0

#Tailwind CSS#Frontend#CSS

Giới thiệu Tailwind CSS v4.0

Tailwind CSS v4 là một bước tiến lớn với engine mới mang tên Oxide, được thiết kế để nhanh hơn, nhẹ hơn và dễ cấu hình hơn. Thay vì sử dụng file JavaScript để cấu hình, v4 chuyển sang hướng CSS-first.

Điểm mới nổi bật

Oxide Engine: Tốc độ build nhanh hơn gấp 10 lần so với v3.
CSS-first Configuration: Bạn có thể cấu hình theme trực tiếp trong file CSS bằng biến CSS (CSS Variables).
Zero-runtime: Không cần runtime, mọi thứ được xử lý tại thời điểm build.

Cấu hình Theme mới

Thay vì tailwind.config.js, bạn định nghĩa trực tiếp trong file CSS chính:

css

@import "tailwindcss";
 
@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-brand-primary: #0ea5e9;
  --color-brand-secondary: #6366f1;
}

Sử dụng các tiện ích mới

V4 giới thiệu các tiện ích mạnh mẽ cho thiết kế hiện đại:

Container Queries: Sử dụng @container để thay đổi layout dựa trên kích thước phần tử cha thay vì viewport.
Dynamic Viewport Units: Hỗ trợ svh, lvh, dvh mặc định.
Native Nesting: Hỗ trợ CSS nesting chuẩn mà không cần plugin.

Cài đặt nhanh

bash

npm install tailwindcss@next @tailwindcss/postcss@next

Lưu ý: Nếu bạn đang dùng Next.js, hãy đảm bảo bạn đã cập nhật lên phiên bản hỗ trợ PostCSS mới nhất để tận dụng tối đa sức mạnh của v4.