文件（Docs）部落格（Blog）作品展示（Showcase）贊助（Sponsor）Plus

快速建構現代網站，完全不需要離開你的 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>

Class WarfareThe Anti-PatternsNo. 4·2025

贊助商

由最優秀的夥伴支持。

Tailwind 獲得了不可思議的合作夥伴和贊助商的支持，讓一群才華洋溢的設計師和工程師得以全職維護這個框架。

成為贊助商

為什麼選擇 Tailwind CSS？

專為現代網頁而生。

Tailwind 毫不掩飾地擁抱現代技術，充分利用所有最新、最棒的 CSS 功能，讓開發者體驗盡可能愉快。

響應式設計

好吧，這不算什麼尖端技術，但只要在任何通用類別前面加上螢幕尺寸，就能在特定中斷點套用它。

手機

整棟房屋休倫湖畔海灘別墅

整棟房屋

休倫湖畔海灘別墅2.66(128 則評論)·Bayfield, ON

這間陽光充足、寬敞的房間適合輕便旅行的旅客，尋找一個舒適溫馨的地方過夜... 顯示更多

濾鏡

現在的網站怎麼能沒有幾個背景模糊效果？繼續堆疊濾鏡，直到你的設計師求你拜託、拜託停下來。

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 Grid 排版

直接在 HTML 中使用 grid 通用類別，讓複雜的排版變得更容易理解。

瀏覽房源

樹屋

豪宅

湖畔小屋

設計師住宅

轉場與動畫

轉場效果如你所預期的那樣運作——在元素上加幾個通用類別就搞定了。

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 WintonDirector of Operations

Kristin YardlyMarketing Coordinator

Emanual CuccittiniStaff Engineer

Kiara SmithVP of Engineering

سارة أحمدمديرة مشاريع

علي محمدمطور برمجيات

خالد عمرمصمم واجهات المستخدم

容器查詢

將元素標記為容器，讓子元素能夠根據容器尺寸的變化進行調整。

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