Lzh on GitHub

兼容性

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

浏览器支持

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 这些功能目前在浏览器中的支持有限。是否要在项目中使用这些现代功能完全取决于您——如果您的目标浏览器不支持，请不要使用这些实用程序和变体。

如果您不确定是否支持现代平台功能， 我可以 使用 数据库是一个很好的资源。

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 "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/dist/lib.d.mts";
@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>

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

类似地，浏览器现在本身支持 min() 、 max() 和 round() 等数学函数，因此不再需要依赖预处理器来实现这些功能。

CSS 模块

Tailwind 与 CSS 模块兼容，如果您将 Tailwind 引入到已经使用它们的项目中，则可以与它们共存，但如果可以避免 ，我们不建议将 CSS 模块和 Tailwind 同时使用 。

范围关注点

CSS 模块旨在解决在 HTML 中编写实用程序类而不是编写自定义 CSS 时不存在的范围问题。

样式自然地通过 Tailwind 限定范围，因为每个实用程序类总是做同样的事情，无论它在哪里使用——将实用程序类添加到 UI 的某个部分不会在其他地方产生一些意想不到的副作用。

表现

使用 CSS 模块时，Vite、Parcel 和 Turbopack 等构建工具会分别处理每个 CSS 模块。这意味着，如果项目中有 50 个 CSS 模块， Tailwind 需要分别运行 50 次 ，这会导致构建时间大幅延长，开发者体验也随之下降。

显式上下文共享

由于 CSS 模块都是单独处理的，因此除非您导入一个，否则它们没有 @theme 。

这意味着像 @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 的使用方式。

引入全局样式，以确保主题变量已定义
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>