What is Tailwind CSS

Tailwind CSS 是一款功能强大的、低层级的 CSS 框架，可以帮助你快速开发出高质量的用户界面。设计理念与传统的 UI 框架不同，它提供了一系列的类，允许开发者直接在 HTML 中构建和设计页面，而不需要编写自定义的 CSS 代码。使用 Tailwind CSS 你不必再为 class 命名烦恼，只需要专注于页面的设计。

升级到 v4.0

2025/01/22 Tailwind 官方正式发布了 v4.0 版本。

官方文档 已经针对 v4.0 进行了更新，并且给出了从 v3.0 升级到 v4.0 的 指南 。同时官方也提供了 升级工具 来帮助你快速完成升级。

以下内容基于 官方 v4.0 博客 翻译摘录，如有不准确之处，欢迎指正。

性能提升

Tailwind CSS 4.0 借助新的 Oxide 引擎，大幅提高了构建速度，并减小了占用空间。增量构建速度提高了 8 倍以上，完全重建也提高了 3.5 倍以上。

以下是构建速度的对比：

	v3.0	v4.0	提升
完全构建	378ms	100ms	3.78x
新增 CSS 进行增量构建	44ms	5ms	8.8x
没有新增 CSS 进行增量构建	35ms	192µs	182x

更好得支持 CSS 新特性

• Native Cascade Layers（原生级联层）：在传统的 CSS 中，样式按层叠顺序应用，即后定义的样式会 覆盖 先定义的样式。但随着项目越来越复杂，CSS 代码会变得难以管理和调试，尤其是在样式表很大、引用的外部库增多时。通过 @layer 规则，Tailwind CSS 4.0 引入了原生级联层，可以让开发者定义样式的优先级，从而解决样式冲突的问题。

@layer theme, base, components, utilities;

• 注册自定义属性：可以通过 @property 来定义内部自定义属性，从而可以实现例如过渡背景渐变等操作，并提高页面性能。

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

• color-mix()： 使用 color-mix() 修改不透明度比以往更加容易。
• 逻辑属性：简化了 RTL 支持并减小了 CSS 体积。可以使用新的 @min-* 和 @max-* 来支持容器查询。

组合变体

在 v4.0 中，可以通过组合不同的选择器变体来快速创建新的样式。例如 group-* ， peer-* ， has-* ， not-* ， focus等。

<div class="group">
  <!-- <div class="group-has-[&:focus]:opacity-100"> -->
  <div class="group-has-focus:opacity-100">
      <!-- ... -->
    </div>
  </div>
</div>

这意味着你可以更加自由灵活的配置你的样式，理论上来说这种组合没有任何限制，如果有需要甚至可以写出 group-not-has-peer-not-data-active:underline 的组合。

CSS 优先配置

这是 Tailwind CSS 4.0 最重要的更新之一，这意味着：

• 你可以用 @import "tailwindcss"; 来替换 @tailwind base; 引入样式。
• 使用 @theme 在 CSS 中更改主题。
• 不在依赖 JavaScript，你不再需要 tailwind.config.js 文件来进行配置

@import "tailwindcss";
@theme {
  --font-family-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}
 /* ... */

更多内容可以参考 TailWind CSS 主题变量 文档

动态接受任意值

Tailwind CSS 4.0 简化了许多样式的工作方式，这意味着大部分样式可以接受任意值而不需要添加额外的配置。例如 opacity-75， w-17， pr-29。从 3.0 版本升级过来的你应该知道这优化的好处。

从 rgb 到 oklch

这是个重大更新之一，它将颜色从 RGB 转换为 Oklch 色彩空间，这是一个更加自然的颜色模型，可以更好地描述颜色的变化。但是同时也会带来浏览器 兼容性 问题，所以需要特别注意。

其他主要差异

弃用

TailWind CSS 4.0 删除了一些过时的功能并提供了替换方案：

已删除	替代方案
不透明度的修改方式，如 bg-opacity-* , text-opacity-* 等	使用不透明度修改器，如 bg-black/50
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

新的 3D transform APIs

Tailwind CSS 4.0 新增了例如： rotate-x-*, rotate-y-*, scale-z-*, translate-z-* 等 APIs

新的渐变 API

• 可以使用 bg-linear-* 为线性渐变添加角度。
• 渐变修饰符，在 v4.0 中默认使用 OKLCH ，如果需要使用 sRGB 可以给渐变添加 srgb 修饰符。如：bg-linear-to-r/srgb。
• 支持圆锥渐变（bg-conic-*）和径向渐变（bg-radial-*），可以与 from-*、via-*、to-* 结合使用。
  conic and radial gradients

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

更多新增 APIs 和 CSS 伪类支持

• not-* 对应 CSS :not() 。
• inset-shadow-* 和 inset-ring-* 对阴影进行调整。
• field-sizing-* 自动调整文本区域的大小。
• color-scheme-* 帮助指定页面的 颜色模式。
• font-stretch-* 控制字体的横向拉伸程度。
• inert: 用于设置标有 inert 属性的非交互式元素样式。
• in-* 与 group-* 类似，都是用于响应父级元素变化时设置元素样式，不同点是 in 不需要指定父级元素，这意味着它会响应任何父级，如果需要精细粒度的控制还是推荐使用 group 。
• open: 对拥有 open 属性的元素进行样式调整，例如 <details>、<dialog>。
• **: 可用于选择所有子元素。

边框颜色

在 v3.0 中， Tailwind CSS 使用 gray-200 作为默认边框颜色，在 v4.0 中改为使用 currentColor 作为默认值。（或许你需要通过指定 border-gray-200 和 divide-gray-200 来保持之前的样式）

ring

ring 的默认宽度从 3px 更改为 1px，默认颜色从 blue-500 更改为 currentColor。

<!-- old: <button class="focus:ring ..."> -->
<button class="focus:ring-3 focus:ring-blue-500...">
  <!-- ... -->
</button>

或者修改全局默认样式：

@theme {
  --default-ring-width: 3px;
  --default-ring-color: var(--color-blue-500);
}

占位符颜色（input:placeholder）

从 gray-400 改为 50% 不透明度的当前文本颜色。

按钮光标

对于 button 元素，默认光标现在使用的是 default，而不是 pointer。

自定义类

不再劫持 @layer utilities 规则来实现自定义类，可以通过 @utility 实现。

/* @layer utilities {
  .tab-4 {
    tab-size: 4;
  }
} */
@utility tab-4 {
  tab-size: 4;
}

变量在值中的使用

在 3.0 中可以使用 bg-[--brand-color] 而不通过 var() ，但这可能会导致歧义。所以 4.0 改为小括号使用变量 bg-(--brand-color)。

文章支持&来源

• tailwind 官方文档
• tailwind 4.0 Blog