text-8xl 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

text-4xl text-gray-950 tracking-tighter text-balance

为什么选择 Tailwind CSS？

为现代 Web 而构建。

text-base text-gray-950

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

现在，调色板使用了更鲜艳的广色域颜色，而你无需理解任何含义。

红色

橙色

琥珀色

黄色

酸橙色

绿色

翠绿色

青色

天蓝色

蓝色

靛蓝色

紫罗兰色

紫色

紫红色

粉红色

玫瑰色

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.4 倍

实时帧率

4.2 倍

多平台构建时间

2.7 倍

3D 变换

有时，两个维度是不够的。在 3D 空间中缩放、旋转和平移任何元素，以增加一丝深度。

text-4xl text-gray-950 tracking-tighter text-balance

工作原理

更快、更小地交付。

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>