快速构建现代网站，无需离开你的 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 CSS？

为现代 Web 而生。

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 网格布局

直接在 HTML 中使用网格工具类，让你更容易理解和实现复杂的布局。

浏览房源

树屋

豪宅

湖畔小屋

设计师之家

过渡与动画

过渡效果如你所愿——只需给元素加上几个工具类，动画就能轻松实现。

transition duration-750linear

transition duration-750ease-out

transition duration-750ease-in-out

transition duration-750ease-in

级联图层

Tailwind 利用 CSS 层（layer），让你无需再为选择器优先级问题而头疼。

@layer theme, base, components, utilities;@layer theme {  :root {    /* 你的主题变量 */  }}@layer base {  /* 初始化样式 */}@layer components {  /* 你的自定义组件 */}@layer utilities {  /* 你的工具类 */}

逻辑属性

支持多语言文本方向不再是噩梦。

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

有时候二维还不够。你可以在三维空间中缩放、旋转、平移任意元素，为界面增添一丝深度感。

工作原理

更快、更小地交付。

text-base text-gray-950

Tailwind 在生产环境构建时会自动移除所有未使用的 CSS，这意味着你的最终 CSS 包体积会尽可能小。实际上，大多数 Tailwind 项目最终只会向客户端发送不到 10kB 的 CSS。

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