Tailwind CSS

Tailwind CSS

Tác giả gốc	Adam Wathan, Jonathan Reinink, David Hemphill, và Steve Schoger
Nhà phát triển	Tailwind Labs
Phát hành lần đầu	13 tháng 5 năm 2019 (2019-05-13)
Phiên bản ổn định	4.1.5  / 30 tháng 4 năm 2025
Kho mã nguồn	github.com/tailwindlabs/tailwindcss
Viết bằng	TypeScript, Rust, CSS
Nền tảng	Web
Có hiệu lực trong	Tiếng Anh
Giấy phép	MIT License
Website	tailwindcss.com

Tailwind CSS là một framework CSS mã nguồn mở. Khác với các framework khác, như Bootstrap, nó không cung cấp một loạt các lớp đã được định nghĩa sẵn cho các phần tử như nút hoặc bảng. Thay vào đó, nó tạo ra một danh sách các lớp CSS "tiện ích" có thể được sử dụng để định kiểu cho từng phần tử bằng cách kết hợp và pha trộn.

Ví dụ, trong các phương thức truyền thông, sẽ có một lớp như message-warning áp dụng màu nền vàng và văn bản in đậm. Tuy nhiên, để làm điều này trong Tailwind, người dùng sẽ phải áp dụng một tập hợp các lớp được tạo bởi thư viện, như bg-yellow-300 và font-bold.

Tính đến ngày 5 tháng 8 năm 2024, Tailwind CSS có hơn 81.000 sao trên GitHub.

Đặc trưng

Các lớp tiện ích

Khái niệm "utility-first" là đặc điểm phân biệt chính của Tailwind.

Ví dụ: Để tạo thông báo màu vàng.

Kết quả
Code	<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg"> <p>Please be careful when feeding the birds.</p> </div>
Class	Tailwind	CSS tương đương
	m-4	margin: 1rem;
	p-4	padding: 1rem;
	bg-yellow-200	background-color: rgb(254 240 138);
	font-bold	font-weight: 700;
	rounded-lg	border-radius: 0.5rem;