text-gray-950 tracking-tighter text-balance

無需離開 HTML 即可快速建構現代網站。

text-lg text-gray-950 font-medium

一個以實用性為主的 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>
類別之戰反模式第 4 期·2025

為何選擇 Tailwind CSS?

為現代網路而建。

text-base text-gray-950

Tailwind 非常現代化,並利用所有最新和最棒的 CSS 功能,使開發人員的體驗盡可能愉快。

響應式設計

好吧,它並不是真正的尖端技術,但只需在任何實用類別前面加上螢幕尺寸,即可在特定斷點應用它。

行動裝置
sm
md
lg
xl
整棟房屋休倫湖上的海灘屋
整棟房屋
休倫湖上的海灘屋2.66(128 則評論)·貝菲爾德,安大略省

這個陽光充足且寬敞的房間適合輕裝旅行且想找一個舒適且溫馨的地方過夜的人...

顯示更多
篩選器

如果沒有一些背景模糊,現在的網站還算什麼?繼續堆疊篩選器,直到您的設計師請您停止。

blur-sm
brightness-150
grayscale
contrast-150
saturate-200
sepia
深色模式

如果您不喜歡燒傷視網膜,只需在任何顏色前面加上 dark:,即可在深色模式中應用它。

CSS 變數

自訂您的主題就像建立幾個 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);}
P3 色彩

現在,調色盤使用更鮮豔的廣色域色彩,而您無需了解這一切的任何意義。

紅色
橘色
琥珀色
黃色
萊姆色
綠色
翠綠色
藍綠色
青色
天藍色
藍色
靛藍色
紫羅蘭色
紫色
紫紅色
粉紅色
玫瑰色
950
900
800
700
600
500
400
300
200
100
50
CSS 格線佈局

直接在您的 HTML 中使用格線實用類別,可以更容易理解複雜的佈局。

瀏覽屬性

樹屋
豪宅
湖濱小屋
設計師住宅
轉換和動畫

轉換效果如您所預期般運作 — 在元素上添加幾個實用類別,您就可以開始使用了。

線性

ease-out

ease-in-out

ease-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 */}
邏輯屬性

支援多種語言文字方向不再是惡夢。

從左至右
從右至左
Will Winton營運總監
Kristin Yardly行銷協調員
Emanual Cuccittini資深工程師
Kiara Smith工程副總裁
سارة أحم專案經理
علي محمد軟體開發人員
خالد عمر使用者介面設計師
容器查詢

將元素標記為容器,以讓子元素適應其大小的變化。

<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>
漸層

無需記住複雜的漸層語法 — 只需使用幾個實用類別即可建立如絲綢般平滑的漸層。

強大與精確的結合

重新定義即時效能

我們的下一代渲染引擎提供無與倫比的速度和效率,使創作者能夠以前所未有的方式突破界限。

渲染時間效能
6.4 倍
即時影格率
4.2 倍
多平台建置時間
2.7 倍
3D 轉換

有時二維空間不足以滿足需求。在 3D 空間中縮放、旋轉和平移任何元素,以增加深度感。

運作方式

更快、更小地交付。

text-base text-gray-950

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 {}
text-4xl text-gray-950 tracking-tighter

Tailwind 的實際應用

無需修改您的 CSS 檔案,即可建置任何您想要的內容。

text-base text-gray-950

因為 Tailwind 非常底層,它絕不會鼓勵您重複設計相同的網站。您最喜歡的一些網站是用 Tailwind 建置的,而您可能毫不知情。

現成的元件

使用 Tailwind UI 加速開發

text-base text-gray-950

Tailwind UI 是由 Tailwind CSS 的創建者設計和開發的一系列美觀、完全響應式的 UI 元件。它有數百個現成的範例可供選擇,保證能幫助您找到您想建構的完美起點。

Copyright © 2025 Tailwind Labs Inc.·商標政策