一個以實用性為主的 CSS 框架,包含許多類別,例如 flex, pt-4, text-center 和 rotate-90,這些類別可以組合在一起,直接在您的標記中建構任何設計。
<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>
為何選擇 Tailwind CSS?
Tailwind 非常現代化,並利用所有最新和最棒的 CSS 功能,使開發人員的體驗盡可能愉快。
好吧,它並不是真正的尖端技術,但只需在任何實用類別前面加上螢幕尺寸,即可在特定斷點應用它。
這個陽光充足且寬敞的房間適合輕裝旅行且想找一個舒適且溫馨的地方過夜的人... 顯示更多
顯示更多如果沒有一些背景模糊,現在的網站還算什麼?繼續堆疊篩選器,直到您的設計師請您停止。
如果您不喜歡燒傷視網膜,只需在任何顏色前面加上 dark:
,即可在深色模式中應用它。
自訂您的主題就像建立幾個 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);}
現在,調色盤使用更鮮豔的廣色域色彩,而您無需了解這一切的任何意義。
直接在您的 HTML 中使用格線實用類別,可以更容易理解複雜的佈局。
轉換效果如您所預期般運作 — 在元素上添加幾個實用類別,您就可以開始使用了。
transition duration-750線性
transition duration-750ease-out
transition duration-750ease-in-out
transition duration-750ease-in
Tailwind 使用 CSS 層,因此您無需擔心特異性問題。
@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 */}
支援多種語言文字方向不再是惡夢。
將元素標記為容器,以讓子元素適應其大小的變化。
<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>
無需記住複雜的漸層語法 — 只需使用幾個實用類別即可建立如絲綢般平滑的漸層。
我們的下一代渲染引擎提供無與倫比的速度和效率,使創作者能夠以前所未有的方式突破界限。
有時二維空間不足以滿足需求。在 3D 空間中縮放、旋轉和平移任何元素,以增加深度感。
運作方式
Tailwind 在建置生產版本時會自動移除所有未使用的 CSS,這表示您最終的 CSS 包將盡可能地小。事實上,大多數 Tailwind 專案傳送到客戶端的 CSS 都小於 10kB。
<!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 的實際應用
因為 Tailwind 非常底層,它絕不會鼓勵您重複設計相同的網站。您最喜歡的一些網站是用 Tailwind 建置的,而您可能毫不知情。
現成的元件
Tailwind UI 是由 Tailwind CSS 的創建者設計和開發的一系列美觀、完全響應式的 UI 元件。它有數百個現成的範例可供選擇,保證能幫助您找到您想建構的完美起點。