Xây dựng trang web hiện đại nhanh chóng mà không cần rời khỏi HTML.
Một framework CSS ưu tiên tiện ích (utility-first) với các class như flex, pt-4, text-center và rotate-90 có thể được kết hợp để xây dựng bất kỳ thiết kế nào, trực tiếp trong markup của bạn.
<div class="flex flex-col items-center rounded-2xl"> <div> <img class="size-48 shadow-xl" alt="" src="/img/cover.png" /> </div> <div class="flex"> <span>Class Warfare</span> <span>The Anti-Patterns</span> <span class="flex"> <span>No. 4</span> <span>·</span> <span>2025</span> </span> </div></div>
Nhà tài trợ
Được hỗ trợ bởi những người giỏi nhất.
Tailwind được hỗ trợ bởi các đối tác và nhà tài trợ tuyệt vời, những người giúp cho một đội ngũ các nhà thiết kế và kỹ sư tài năng có thể duy trì framework toàn thời gian.
Tại sao lại là Tailwind CSS?
Được xây dựng cho web hiện đại.
Tailwind hiện đại một cách không khoan nhượng, và tận dụng tất cả các tính năng CSS mới nhất và tuyệt vời nhất để làm cho trải nghiệm của nhà phát triển trở nên thú vị nhất có thể.
Được rồi, nó không hẳn là mới mẻ, nhưng chỉ cần thêm kích thước màn hình vào trước bất kỳ tiện ích nào để áp dụng nó tại một điểm ngắt cụ thể.
This sunny and spacious room is for those traveling light and looking for a comfy and cozy place to lay their head for a night... Show more
Show more
Một trang web ngày nay sẽ ra sao nếu thiếu vài hiệu ứng làm mờ nền? Cứ tiếp tục chồng các bộ lọc cho đến khi thiết kế của bạn cầu xin bạn dừng lại.
Nếu bạn không muốn đốt cháy võng mạc của mình, chỉ cần thêm dark: vào trước bất kỳ màu nào để áp dụng nó trong chế độ tối.
Tùy chỉnh giao diện của bạn đơn giản như việc tạo một vài biến CSS.
@theme { --font-sans: "Inter", sans-serif; --font-mono: "IBM Plex Mono", monospace; --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --color-mint-100: oklch(0.97 0.15 145); --color-mint-200: oklch(0.92 0.18 145); --color-mint-300: oklch(0.85 0.22 145); --color-mint-400: oklch(0.78 0.25 145); --color-mint-500: oklch(0.7 0.28 145); --color-mint-600: oklch(0.63 0.3 145); --color-mint-700: oklch(0.56 0.32 145); --color-mint-800: oklch(0.48 0.35 145); --color-mint-900: oklch(0.4 0.37 145); --color-mint-950: oklch(0.3 0.4 145);}Bảng màu hiện sử dụng các màu gam rộng sống động hơn mà bạn không cần phải hiểu bất kỳ điều gì về nó.
Sử dụng các tiện ích lưới trực tiếp trong HTML giúp việc suy luận về các bố cục phức tạp trở nên dễ dàng hơn nhiều.
Browse properties
Các hiệu ứng chuyển tiếp hoạt động theo cách bạn mong đợi — chỉ cần thêm một vài tiện ích vào một phần tử và bạn đã sẵn sàng.
transition duration-750linear
transition duration-750ease-out
transition duration-750ease-in-out
transition duration-750ease-in
Tailwind sử dụng các lớp CSS để bạn không phải lo lắng về các vấn đề độ ưu tiên (specificity).
@layer theme, base, components, utilities;@layer theme { :root { /* Your theme variables */ }}@layer base { /* Preflight styles */}@layer components { /* Your custom components */}@layer utilities { /* Your utility classes */}Hỗ trợ hướng văn bản đa ngôn ngữ không còn là cơn ác mộng nữa.
Gắn thẻ một phần tử là container để cho phép các phần tử con thích ứng với những thay đổi về kích thước của nó.
<div class="@container"> <div class="grid grid-cols-1 @sm:grid-cols-2"> <img src="/img/photo-1.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-2.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-3.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-4.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> </div></div>Không cần phải nhớ cú pháp gradient phức tạp đó — tạo ra các gradient mượt mà chỉ với một vài lớp tiện ích.
Redefining real-time performance
Our next-generation rendering engine delivers unmatched speed and efficiency, empowering creators to push boundaries like never before.
Đôi khi hai chiều là không đủ. Thu phóng, xoay và dịch chuyển bất kỳ phần tử nào trong không gian 3D để thêm một chút chiều sâu.
Cách hoạt động
Vận chuyển nhanh hơn và nhỏ gọn hơn.
Tailwind tự động loại bỏ tất cả CSS không sử dụng khi build cho production, điều này có nghĩa là gói CSS cuối cùng của bạn sẽ nhỏ nhất có thể. Trên thực tế, hầu hết các dự án Tailwind gửi ít hơn 10kB CSS tới client.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <link rel="stylesheet" href="/build.css" /> </head> <body> <button class=""></button> </body></html>@layer utilities {}Tailwind trong thực tế
Xây dựng bất cứ thứ gì bạn muốn, mà không cần chạm vào tệp CSS của bạn.
Bởi vì Tailwind rất cơ bản (low-level), nó không bao giờ khuyến khích bạn thiết kế cùng một trang web hai lần. Một số trang web yêu thích của bạn được xây dựng bằng Tailwind, và có lẽ bạn không hề hay biết.
Thành phần có sẵn
Di chuyển nhanh hơn nữa với Tailwind Plus.
Tailwind Plus là một bộ sưu tập các thành phần UI đẹp mắt, hoàn toàn đáp ứng, được thiết kế và phát triển bởi chúng tôi, những người tạo ra Tailwind CSS. Nó có hàng trăm ví dụ sẵn sàng sử dụng để bạn lựa chọn, và đảm bảo giúp bạn tìm thấy điểm khởi đầu hoàn hảo cho những gì bạn muốn xây dựng.
