UnoCSS là gì? Công cụ Atomic CSS siêu nhẹ và linh hoạt cho các ứng dụng web hiện đại

Khi xây dựng giao diện web hiện đại, việc viết CSS thủ công ngày càng trở nên tốn thời gian và khó bảo trì. Những framework như Tailwind CSS đã thay đổi cách chúng ta xây dựng UI bằng mô hình Utility-first CSS. Tuy nhiên, nếu bạn muốn một giải pháp nhẹ hơn, nhanh hơn và có khả năng tùy biến gần như không giới hạn, UnoCSS là cái tên rất đáng để khám phá.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu UnoCSS là gì, cách hoạt động, những ưu điểm nổi bật và khi nào nên lựa chọn UnoCSS thay vì các giải pháp CSS truyền thống.

#UnoCSS là gì?

UnoCSS là một Atomic CSS Engine được phát triển bởi Anthony Fu. Không giống các framework CSS truyền thống, UnoCSS không đi kèm một bộ utility cố định. Thay vào đó, nó tạo CSS theo nhu cầu (on-demand) bằng cách phân tích các class được sử dụng trong mã nguồn.

Điều này có nghĩa là thay vì sinh ra hàng chục nghìn class ngay từ đầu, UnoCSS chỉ tạo đúng những quy tắc CSS mà ứng dụng của bạn thực sự sử dụng.

Ví dụ:

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
	  Save
</button>

UnoCSS sẽ chỉ sinh CSS cho: bg-blue-500, text-white, px-4, py-2, rounded-lg.

Những utility không được sử dụng sẽ không xuất hiện trong file CSS cuối cùng.

#UnoCSS hoạt động như thế nào?

Khác với nhiều framework CSS truyền thống, UnoCSS hoạt động như một engine.

Quy trình cơ bản gồm bốn bước:

1. Quét mã nguồn để tìm các class được sử dụng.
2. 1. Phân tích từng class theo các preset và rules đã cấu hình.
3. 1. Sinh CSS tương ứng.
4. 1. Loại bỏ mọi CSS không cần thiết.

Nhờ cách tiếp cận này, kích thước file CSS thường rất nhỏ và tốc độ build cũng được cải thiện đáng kể.

#Những điểm nổi bật của UnoCSS

#1. Hiệu năng rất cao

UnoCSS được viết với mục tiêu tối ưu tốc độ. Trong các dự án lớn có hàng nghìn component, thời gian quét và sinh CSS thường nhanh hơn nhiều so với các công cụ utility-first truyền thống. Điều này giúp rút ngắn thời gian khởi động dự án và tăng tốc quá trình phát triển.

#2. Sinh CSS theo nhu cầu

UnoCSS chỉ tạo CSS cho những class thực sự xuất hiện trong mã nguồn. Ví dụ, nếu bạn chỉ dùng khoảng 200 utility class, file CSS cuối cùng cũng chỉ chứa khoảng 200 quy tắc tương ứng.

Kết quả là: bundle CSS nhỏ hơn, tải trang nhanh hơn, và giảm lượng CSS không sử dụng.

#3. Khả năng tùy biến mạnh mẽ

Một trong những điểm hấp dẫn nhất của UnoCSS là khả năng mở rộng. Bạn có thể tạo utility class mới, định nghĩa shortcut, viết preset riêng, sinh CSS bằng biểu thức chính quy (Dynamic Rules), và tạo variant tùy chỉnh.

Ví dụ:

shortcuts: {
  btn: "px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
	}
	```
	
	Sau đó chỉ cần:
	
	```html
	<button class="btn">
	  Save
		</button>
		```
		
		Shortcut giúp tái sử dụng các nhóm utility mà vẫn giữ được tính linh hoạt.
		
		### 4. Hỗ trợ nhiều framework
		
		UnoCSS không chỉ dành cho Vue mà còn hoạt động tốt với [React](https://react.dev), [Vue](https://vuejs.org), [Svelte](https://svelte.dev), [SolidJS](https://www.solidjs.com), [Astro](https://astro.build), [Vite](https://vite.dev), [Nuxt](https://nuxt.com), [Next.js](https://nextjs.org), [Qwik](https://qwik.dev).
		
		Nhờ tích hợp với Vite và các công cụ build phổ biến, việc thêm UnoCSS vào dự án thường chỉ mất vài phút.
		
		### 5. Preset linh hoạt
		
		UnoCSS cung cấp nhiều [preset chính thức](https://unocss.dev/presets/) để phù hợp với nhu cầu của từng dự án. Một số preset phổ biến hiện nay:
		
		- [Preset Wind3/Wind4](https://unocss.dev/presets/): Mang phong cách tương thích với Tailwind CSS, giúp dễ dàng chuyển đổi từ các dự án hiện có (đây cũng chính là preset kế thừa Preset Uno trước đây, nay đã được gộp và đổi tên).
		- [Preset Mini](https://unocss.dev/presets/mini): Tập trung vào kích thước nhỏ và tốc độ, gồm các quy tắc và variant cơ bản nhất.
		- [Preset Icons](https://unocss.dev/presets/icons): Cho phép sử dụng hàng nghìn biểu tượng từ nhiều bộ icon (thông qua [Iconify](https://icones.js.org)) chỉ bằng class.
		
		Ví dụ:
		
		```html
		<div class="i-mdi-home text-xl"></div>
		```
		
		UnoCSS sẽ tự động tạo CSS để hiển thị biểu tượng tương ứng mà không cần cài đặt từng file SVG riêng lẻ.
		
		## So sánh UnoCSS và Tailwind CSS
		
		| Tiêu chí | UnoCSS | Tailwind CSS |
		|---|---|---|
		| Cách hoạt động | CSS Engine | CSS Framework |
		| Sinh CSS | Theo nhu cầu | Theo nhu cầu (JIT) |
		| Khả năng tùy biến | Rất cao | Cao |
		| Tốc độ build | Rất nhanh | Nhanh |
		| Shortcut | Có | Component hoặc plugin |
		| Dynamic Rules | Có | Hạn chế hơn |
		| Preset | Có | Theme & Plugin |
		
		[Tailwind CSS](https://tailwindcss.com) nổi bật với hệ sinh thái lớn, tài liệu phong phú và cộng đồng đông đảo. Trong khi đó, UnoCSS tập trung vào tính linh hoạt, tốc độ và khả năng mở rộng, phù hợp với những đội ngũ muốn kiểm soát sâu hơn cách sinh CSS.
		
		## Khi nào nên sử dụng UnoCSS?
		
		UnoCSS là lựa chọn phù hợp nếu bạn muốn tối ưu kích thước CSS, đang sử dụng Vite hoặc các công cụ build hiện đại, cần tạo nhiều utility class tùy chỉnh, muốn tốc độ build nhanh trong các dự án lớn, hoặc yêu thích mô hình Utility-first nhưng muốn linh hoạt hơn so với Tailwind CSS.
		
		Ngược lại, nếu dự án cần một hệ sinh thái plugin phong phú hoặc đội ngũ đã quen với Tailwind CSS, việc tiếp tục sử dụng Tailwind cũng là một lựa chọn hợp lý.
		
		## Một số tính năng đáng chú ý
		
		Ngoài các utility cơ bản, UnoCSS còn cung cấp nhiều tính năng giúp tăng năng suất làm việc:
		
		[Variant Groups](https://unocss.dev/transformers/variant-group) giúp gom các utility có cùng tiền tố:
		
		```html
		<div class="hover:(bg-blue-500 text-white)">
		</div>
		```
		
		[Attributify Mode](https://unocss.dev/presets/attributify) cho phép viết utility dưới dạng thuộc tính HTML:
		
		```html
		<button bg="blue-500" text="white" p="4">
		  Save
			</button>
			```
			
			Arbitrary Values hỗ trợ các giá trị tùy ý:
			
			```html
			<div class="w-[372px]">
			</div>
			```
			
			Những tính năng này giúp mã nguồn ngắn gọn và dễ đọc hơn trong nhiều trường hợp.
			
			## Kết luận
			
			UnoCSS không chỉ là một framework CSS khác mà là một Atomic CSS Engine mạnh mẽ, được thiết kế để mang lại hiệu năng cao và khả năng tùy biến tối đa. Với cơ chế sinh CSS theo nhu cầu, tốc độ build nhanh và khả năng mở rộng linh hoạt, UnoCSS là lựa chọn hấp dẫn cho các dự án web hiện đại.
			
			Nếu bạn đang sử dụng Vite, React, Vue hay bất kỳ framework nào hỗ trợ hệ sinh thái hiện đại, UnoCSS là công cụ đáng để trải nghiệm. Đặc biệt với những dự án cần tối ưu hiệu năng hoặc muốn xây dựng một hệ thống utility theo cách riêng, [UnoCSS](https://github.com/unocss/unocss) có thể mang lại nhiều lợi ích vượt trội so với các giải pháp truyền thống.

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text     | Text     | Text     |