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

为现代化网站而构建。

Tailwind 毫不掩饰地现代化，并利用所有最新和最优秀的 CSS 特性，使开发者体验尽可能愉快。

响应式设计

好的，这并不算前沿技术，但只需在任何工具前面添加一个屏幕尺寸，就可以在特定的断点应用它。

Mobile

整栋房子休伦湖的海滨别墅

整栋房子

休伦湖的海滨别墅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 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 变换

有时候二维不足以满足需求，在三维空间中缩放、旋转和移动任何元素，以增加一丝深度。

How it works

发货更快、更小。

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>