兼容性

浏览器支持

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 按需生成，而不是必须预先定义。

最重要的是，当您使用 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() 等数学函数，因此也不再需要依赖预处理器来实现这些功能。

这意味着除非您显式导入全局样式作为参考，否则 @apply 等功能将无法按您预期的方式工作

导入您的全局样式作为参考，以确保您的主题变量已定义

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

在此页上