text-8xl 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

text-4xl text-gray-950 tracking-tighter text-balance

為何選擇 Tailwind CSS？

為現代網路而建。

text-base text-gray-950

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 色彩

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

紅色

橘色

琥珀色

黃色

萊姆色

綠色

翠綠色

藍綠色

青色

天藍色

藍色

靛藍色

紫羅蘭色

紫色

紫紅色

粉紅色

玫瑰色

950

900

800

700

600

500

400

300

200

100

CSS 格線佈局

直接在您的 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 */}

邏輯屬性

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

從左至右

從右至左

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

運作方式

更快、更小地交付。

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>