Giới Thiệu Về Tailwind CSS

Tailwind CSS đã mang đến một cách tiếp cận mới trong phát triển web. Mặc dù không phải ai cũng yêu thích phong cách mã hóa của Tailwind, nhưng cá nhân tôi lại rất yêu thích nó. Với kiểu mã inline, nhiều lập trình viên có thể cảm thấy không thoải mái, nhưng kể từ năm 2019, Tailwind đã trở nên cực kỳ phổ biến. Tôi thích cách thức mà chúng ta có thể sao chép và sử dụng mã mà không làm ảnh hưởng đến các file khác.

Cập Nhật Về Tailwind CSS 4.x

Để giúp các bạn nắm rõ hơn về phiên bản Tailwind CSS 4.x này, hãy cùng điểm qua một số thông tin và từ khóa quan trọng:

Các bạn có thể tham khảo tài liệu beta của Tailwind CSS 4.x theo link này: Tài liệu beta Tailwind CSS 4x
Tailwind 4.x chính thức ra mắt vào tháng 11 năm 2024, chỉ khoảng 2 tháng trước khi bài viết này được xuất bản. Điều này mở ra nhiều cơ hội cho các lập trình viên.
Một số từ khóa liên quan mà bạn nên biết: Lightning CSS, Tailwind Oxide, OKLCH.
Nếu bạn muốn hiểu sâu hơn, hãy đọc tài liệu của Tailwind CSS 3.x để so sánh.

Những Điểm Mới Của Tailwind CSS 4 So Với 3

1. Sử Dụng Engine Mới

Tailwind 4 sử dụng Engine Oxide, giúp cải tiến đáng kể cho Framework:

Engine này được phát triển bằng ngôn ngữ Rust, mang lại tốc độ xử lý nhanh hơn và tối ưu hóa hiệu suất tốt hơn, giúp việc build diễn ra nhanh hơn.
Lightning CSS, cũng được viết bằng Rust, hỗ trợ việc chuyển đổi CSS từ PostCSS và Autoprefixer nhanh hơn thông qua việc áp dụng đa luồng và song song hóa.

2. Cấu Hình Đơn Giản Hơn

Cấu trúc config của Tailwind 4 đã được tối giản, mang lại sự tiện lợi cho người dùng:

Cấu trúc V3:

Copy

@tailwind base;
@tailwind components;
@tailwind utilities;

Cấu trúc V4 đơn giản hơn:

Copy

@import "tailwindcss";

3. Chỉnh Sửa Khoảng Cách Động

Tailwind 4 đã chuyển đổi các class khoảng cách như m-, w-, mt-* thành bội số của 0.25 rem. Ví dụ, m-1 sẽ tương đương với 0.25 rem, và m-3 tương đương với 0.75 rem. Điều này giúp tạo ra sự nhất quán hơn trong thiết kế.

4. Chuyển Đổi Màu Từ RGB Sang OKLCH

Việc chuyển đổi này giúp màu sắc trở nên sống động và tự nhiên hơn. Các bạn hãy tham khảo bảng màu để thấy sự khác biệt rõ rệt.

Hướng Dẫn Nâng Cấp Từ V3 Lên V4

Nếu bạn muốn nâng cấp từ phiên bản 3 lên 4, chỉ cần chạy lệnh sau:

npx @tailwindcss/upgrade@next

Cảm ơn các bạn đã theo dõi bài viết này! Hy vọng nó sẽ giúp ích cho các bạn trong việc làm quen với Tailwind CSS 4.0.
source: viblo

Khám Phá Các Tính Năng Mới và Cải Tiến Đáng Chú Ý của Tailwind CSS 4.0