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

一個實用至上的 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>

階級鬥爭反模式No. 4·2025

為什麼選擇 Tailwind CSS？

為現代 Web 構建。

Tailwind 毫不妥協地擁抱現代性，並充分利用所有最新和最強大的 CSS 功能，以儘可能提升開發者的體驗。

響應式設計

好的，這不算最前沿的技術，但只需在任何實用工具前面加上螢幕尺寸，即可在特定斷點應用它。

移動端

整套房子休倫湖畔的沙灘別墅

整套房子

休倫湖畔的沙灘別墅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 色彩

現在，調色盤使用更鮮豔的廣色域色彩，而你無需理解任何相關含義。

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

950

900

800

700

600

500

400

300

200

100

CSS 網格佈局

直接在 HTML 中使用網格實用工具，可以更輕鬆地處理複雜的佈局。

瀏覽屬性

樹屋

豪宅

湖畔小屋

設計師住宅

過渡和動畫

過渡效果如你所願 — 在元素上新增幾個實用工具類，即可開始工作。

transition duration-750linear

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 */
}

邏輯屬性

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

ltr

rtl

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.4x

即時幀率

4.2x

多平臺構建時間

2.7x

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>