兼容性

浏览器支持

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，这些特性在浏览器支持上较为有限。您是否在项目中使用这些现代特性取决于您选择的浏览器 — 如果您目标的浏览器不支持它们，那么只需不使用这些实用工具和变体即可。

如果您不确定某个现代平台特性的支持情况，Can I use 数据库是一个很好的资源。

Sass、Less 和 Stylus

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

将 Tailwind CSS 本身视为您的预处理器 — 您不应将 Tailwind 与 Sass 一起使用，其原因与您不应将 Sass 与 Stylus 一起使用相同。

由于 Tailwind 是为现代浏览器设计的，因此您实际上不需要预处理器来处理嵌套或变量，Tailwind 本身会处理像打包您的导入和添加厂商前缀之类的事情。

构建时导入

Tailwind 将自动打包您通过 @import 包含的其他 CSS 文件，无需单独的预处理工具。

app.css

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

在这个示例中，typography.css 文件将由 Tailwind 自动打包进您的编译 CSS 中，无需其他工具，如 Sass 或 postcss-import。

变量

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

typography.css

.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

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

原生 CSS 对嵌套支持如今也很好，所以即使您不使用 Tailwind，您也确实不需要预处理器来处理嵌套。

循环

在 Tailwind 中，您在过去可能用于循环的类（如 col-span-1、col-span-2 等）会在您使用它们时按需生成，而不需要预先定义。

此外，当您使用 Tailwind CSS 构建内容时，您处理绝大多数样式是在 HTML 中，而不是在 CSS 文件中。由于您根本不需要编写大量 CSS，因此您根本不需要设计用于程序化生成大量自定义 CSS 规则的功能，如循环。

颜色和数学函数

在使用像 Sass 或 Less 的预处理器时，您可能使用 darken 或 lighten 等函数来调整颜色。

在使用 Tailwind 时，推荐的工作流程是使用一个预定义的颜色调色板，其中包括每种颜色的浅色和深色阴影，例如框架中包含的精心设计的默认颜色调色板。

<button class="bg-indigo-500 hover:bg-indigo-600 ...">
  <!-- ... -->
</button>

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

同样，浏览器现在也原生支持 min()、max() 和 round() 等数学函数，因此不再需要依赖预处理器来使用这些功能。

导入您的全局样式作为引用，以确保您的主题变量被定义

Button.module.css

@reference "../app.css";
button {
  @apply bg-blue-500;
}

或者，您也可以使用 CSS 变量代替 @apply，这样可以让 Tailwind 跳过对这些文件的处理，从而提高构建性能：

Button.module.css

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

Vue、Svelte 和 Astro

Vue、Svelte 和 Astro 支持在组件文件中使用 <style> 块，这些块的行为与 CSS 模块非常相似，这意味着它们也被构建工具单独处理，并具有所有相同的缺点。

如果您将 Tailwind 与这些工具一起使用，我们建议避免在组件中使用 <style> 块，而是直接在标记中使用实用程序类进行样式设置，这正是 Tailwind 设计的方式。

如果您确实使用 <style> 块，如果希望 @apply 等特性正常工作，请确保导入全局样式作为引用：

导入您的全局样式作为引用，以确保您的主题变量被定义

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>

浏览器支持

Sass、Less 和 Stylus

构建时导入

变量

嵌套

循环

颜色和数学函数

CSS 模块

范围问题

性能

显式上下文共享

Vue、Svelte 和 Astro

目录