无需离开 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>