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

为什么选择 Tailwind CSS?

为现代 Web 而构建。

text-base text-gray-950

Tailwind 不遗余力地追求现代化,并利用所有最新和最棒的 CSS 功能,使开发者体验尽可能愉快。

响应式设计

好吧,它并不是真正的尖端技术,但只需在任何实用程序前面添加屏幕尺寸,即可将其应用于特定断点。

移动设备
sm
md
lg
xl
整套房子休伦湖畔海滨别墅
整套房子
休伦湖畔海滨别墅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
50
CSS 网格布局

直接在 HTML 中使用网格实用程序可以更容易地推断复杂的布局。

浏览属性

树屋
豪宅
湖畔小屋
设计师住宅
过渡和动画

过渡效果如你所愿 —— 在元素上添加一些实用程序,你就可以开始工作了。

linear

ease-out

ease-in-out

ease-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.4 倍
实时帧率
4.2 倍
多平台构建时间
2.7 倍
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>
@layer utilities {}
text-4xl text-gray-950 tracking-tighter

真实世界的 Tailwind

构建任何你想要的东西,而无需触及你的 CSS 文件。

text-base text-gray-950

由于 Tailwind 非常底层,它永远不会鼓励你两次设计相同的站点。你最喜欢的一些网站是用 Tailwind 构建的,你可能不知道。

现成的组件

使用 Tailwind UI 更快速地行动

text-base text-gray-950

Tailwind UI 是一个精美的、完全响应式的 UI 组件集合,由我们,Tailwind CSS 的创建者设计和开发。它拥有数百个即用示例供您选择,并保证帮助您找到您想要构建的完美起点。

版权所有 © 2025 Tailwind Labs Inc.·商标政策