兼容性

了解浏览器支持以及与其他工具的兼容性。

浏览器支持

Tailwind CSS v4.0 面向现代浏览器设计并经过测试，框架的核心功能明确依赖以下浏览器版本：

• Chrome 111 (2023 年 3 月发布)
• Safari 16.4 (2023 年 3 月发布)
• Firefox 128 (2024 年 7 月发布)

Tailwind 也支持许多前沿平台特性，例如 field-sizing: content、@starting-style 和 text-wrap: balance，它们的浏览器支持还比较有限。是否在项目中使用这些现代特性由你决定——如果目标浏览器不支持，就不要使用对应的 utility 和变体。

如果不确定某项现代平台特性的支持情况，Can I use 数据库是很好的参考。

Sass、Less 和 Stylus

Tailwind CSS v4.0 是面向特定工作流的全功能 CSS 构建工具，并不设计为与 Sass、Less 或 Stylus 等 CSS 预处理器一起使用。

把 Tailwind CSS 本身当作预处理器——你不应该把 Tailwind 和 Sass 一起用，就像你不会把 Sass 和 Stylus 一起用一样。

由于 Tailwind 面向现代浏览器，嵌套、变量这类能力其实不再需要预处理器；Tailwind 自己就会打包 @import 并添加厂商前缀。

构建时导入

你用 @import 引入的其他 CSS 文件会被 Tailwind 自动打包，无需单独的预处理工具。

app.css

@import "tailwindcss";
@import "./typography.css";

在这个例子中，typography.css 会被 Tailwind 打包进编译后的 CSS，不需要 Sass 或 postcss-import 等其他工具。

变量

所有现代浏览器都支持原生 CSS 变量，无需任何预处理器：

typography.css

/* [!code word:var(--text-base)] */
.typography {
  font-size: var(--text-base);
  color: var(--color-gray-700);
}

Tailwind 内部大量依赖 CSS 变量，所以只要项目能用 Tailwind，就能用原生 CSS 变量。

嵌套

底层上，Tailwind 使用 Lightning CSS 处理如下嵌套 CSS：

typography.css

.typography {
  p {
    font-size: var(--text-base);
  }
  img {
    border-radius: var(--radius-lg);
  }
}

Tailwind 会把嵌套 CSS 展平，以便所有现代浏览器都能理解：

output.css

/* prettier-ignore */
.typography p {
  font-size: var(--text-base);
}

.typography img {
  border-radius: var(--radius-lg);
}

如今原生 CSS 嵌套的支持也已经很好，即使不用 Tailwind，嵌套也不再真正需要预处理器。

循环

过去你可能用循环生成的那些 class（例如 col-span-1、col-span-2 等），在 Tailwind 中会在使用时按需生成，不必预先定义。

更重要的是，用 Tailwind CSS 构建界面时，绝大部分样式写在 HTML 里，而不是 CSS 文件中。既然本来就不会写大量 CSS，也就不需要专为程序化生成大量自定义 CSS 规则而设计的循环这类功能。

颜色与数学函数

使用 Sass 或 Less 等预处理器时，你可能用过 darken 或 lighten 这类函数来调整颜色。

使用 Tailwind 时，推荐工作流是使用预定义调色板，其中每种颜色都包含浅色和深色色阶，例如框架自带、精心设计的默认调色板。

<!-- [!code word:hover\:bg-indigo-600] -->
<button class="bg-indigo-500 hover:bg-indigo-600 ...">
  <!-- ... -->
</button>

你也可以使用 color-mix() 等现代 CSS 特性，在运行时直接在浏览器中调整颜色。这甚至能调整用 CSS 变量或 currentcolor 关键字定义的颜色，而这是预处理器做不到的。

同样，浏览器现在已原生支持 min()、max()、round() 等数学函数，这些特性也不再需要依赖预处理器。

CSS modules

Tailwind 兼容 CSS modules；如果你要把 Tailwind 引入已经在用 CSS modules 的项目，两者可以共存。但只要能避免，我们不建议把 CSS modules 和 Tailwind 一起使用。

作用域问题

CSS modules 要解决的是作用域问题；而当你在 HTML 中组合 utility class、而不是编写自定义 CSS 时，这类问题根本不存在。

在 Tailwind 中，样式天然具有作用域：每个 utility class 无论用在哪里，行为都相同——不会因为在界面某一处添加 utility class，就在别处产生意外副作用。

性能

使用 CSS modules 时，Vite、Parcel、Turbopack 等构建工具会分别处理每个 CSS module。也就是说，如果项目里有 50 个 CSS module，Tailwind 需要分别运行 50 次，构建会慢很多，开发体验也会变差。

显式共享上下文

由于每个 CSS module 都是单独处理的，除非你导入，否则它们没有 @theme。

这意味着，除非你显式把全局样式作为 reference 导入，否则 @apply 等功能不会按你预期工作：

INFO

将全局样式以 reference 方式导入，确保主题变量已定义

Button.module.css

@reference "../app.css";

button {
  @apply bg-blue-500;
}

或者，你也可以不用 @apply，直接使用 CSS 变量；额外好处是 Tailwind 可以跳过处理这些文件，从而提升构建性能：

Button.module.css

button {
  background: var(--color-blue-500);
}

Vue、Svelte 和 Astro

Vue、Svelte 和 Astro 支持组件文件中的 <style> 块，行为非常接近 CSS modules，也就是说它们会被构建工具完全分开处理，并具有同样的缺点。

如果在这些工具中使用 Tailwind，我们建议避免在组件里写 <style> 块，而是直接在标记中用 utility class 写样式——这才是 Tailwind 的预期用法。

如果确实使用 <style> 块，并且希望 @apply 等功能按预期工作，请务必将全局样式作为 reference 导入：

INFO

将全局样式以 reference 方式导入，确保主题变量已定义

Button.vue

<template>
  <button><slot /></button>
</template>

<style scoped>
  @reference "../app.css";

  button {
    @apply bg-blue-500;
  }
</style>

或者干脆使用全局定义的 CSS 变量，而不是 @apply 这类功能——这样完全不需要 Tailwind 处理组件 CSS：

Button.vue

<template>
  <button><slot /></button>
</template>

<style scoped>
  button {
    background-color: var(--color-blue-500);
  }
</style>