兼容性

浏览器支持(Browser support)

¥Browser support

Tailwind CSS v4.0 是为现代浏览器设计和测试的，该框架的核心功能具体取决于以下浏览器版本：

¥Tailwind CSS v4.0 is designed for and tested on modern browsers, and the core functionality of the framework specifically depends on these browser versions:

• Chrome 111（2023 年 3 月发布）

  ¥Chrome 111 (released March 2023)

• Safari 16.4（2023 年 3 月发布）

  ¥Safari 16.4 (released March 2023)

• Firefox 128（2024 年 7 月发布）

  ¥Firefox 128 (released July 2024)

Tailwind 还支持许多前沿平台功能，如 field-sizing: content、@starting-style 和 text-wrap: balance，这些功能在浏览器上的支持有限。是否要在项目中使用这些现代功能取决于你 - 如果你所针对的浏览器不支持它们，请不要使用这些工具和变体。

¥Tailwind also includes support for many bleeding-edge platform features like field-sizing: content, @starting-style, and text-wrap: balance that have limited browser support. It's up to you if you want to use these modern features in your projects — if the browsers you're targeting don't support them, simply don't use those utilities and variants.

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

¥If you're unsure about the support for a modern platform feature, the Can I use database is a great resource.

Sass、Less 和 Stylus(Sass, Less, and Stylus)

¥Sass, Less, and Stylus

Tailwind CSS v4.0 是一款功能齐全的 CSS 构建工具，专为特定工作流程而设计，不适用于 Sass、Less 或 Stylus 等 CSS 预处理器。

¥Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

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

¥Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

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

¥Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.

构建时导入(Build-time imports)

¥Build-time imports

Tailwind 将自动打包你使用 @import 包含的其他 CSS 文件，而无需单独的预处理工具。

¥Tailwind will automatically bundle other CSS files you include with @import, without the need for a separate preprocessing tool.

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

在此示例中，Tailwind 将把 typography.css 文件打包到你编译的 CSS 中，而无需任何其他工具，如 Sass 或 postcss-import。

¥In this example, the typography.css file will be bundled into your compiled CSS for you by Tailwind, without any other tooling like Sass or postcss-import.

变量(Variables)

¥Variables

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

¥All modern browsers support native CSS variables without the need for any sort of preprocessor:

.typography {
  font-size: var(--text-base);
  color: var(--color-gray-700);
}

Tailwind 在内部严重依赖 CSS 变量，因此如果你可以在项目中使用 Tailwind，则可以使用原生 CSS 变量。

¥Tailwind relies on CSS variables heavily internally, so if you can use Tailwind in your project, you can use native CSS variables.

嵌套(Nesting)

¥Nesting

在底层，Tailwind 使用 Lightning CSS 来处理嵌套 CSS，如下所示：

¥Under the hood Tailwind uses Lightning CSS to process nested CSS like this:

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

Tailwind 为你展平嵌套的 CSS，以便所有现代浏览器都可以理解：

¥Tailwind flattens that nested CSS for you so it can be understood by all modern browsers:

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

如今，原生 CSS 嵌套支持也非常好，因此即使你不使用 Tailwind，也不需要嵌套预处理器。

¥Native CSS nesting support is also very good these days, so you don't really need a preprocessor for nesting even if you aren't using Tailwind.

循环(Loops)

¥Loops

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

¥In Tailwind, the sorts of classes you may have used loops for in the past (like col-span-1, col-span-2, etc.) are generated for you on-demand by Tailwind whenever you use them instead of having to be predefined.

最重要的是，当你使用 Tailwind CSS 构建东西时，你将在 HTML 中完成绝大多数样式设置，而不是在 CSS 文件中。由于你一开始并没有编写大量 CSS，因此你不需要循环等旨在以编程方式生成大量自定义 CSS 规则的功能。

¥On top of that, when you're building things with Tailwind CSS, you do the vast majority of your styling in your HTML, not in CSS files. Since you're not writing tons of CSS in the first place, you just don't need features like loops that are designed for programmatically generating lots of custom CSS rules.

颜色和数学函数(Color and math functions)

¥Color and math functions

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

¥When using preprocessors like Sass or Less, you may have used functions like darken or lighten to adjust colors.

使用 Tailwind 时，建议的工作流程是使用预定义的调色板，其中包含每种颜色的浅色和深色，例如框架中包含的专业设计的 默认调色板。

¥When using Tailwind, the recommended workflow is to use a predefined color palette that includes light and dark shades of each color, like the expertly designed default color palette included with the framework.

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

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

¥You can also use modern CSS features like color-mix() to adjust colors at run-time directly in the browser. This even lets you adjust colors defined using CSS variables or the currentcolor keyword, which isn't possible with preprocessors.

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

¥Similarly, browsers support math functions like min(), max(), and round() natively now, so there's no need to rely on a preprocessor for these features anymore either.

CSS 模块(CSS modules)

¥CSS modules

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

¥Tailwind is compatible with CSS modules and can co-exist with them if you are introducing Tailwind into a project that already uses them, but we don't recommend using CSS modules and Tailwind together if you can avoid it.

范围问题(Scoping concerns)

¥Scoping concerns

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

¥CSS modules are designed to solve scoping problems that just don't exist when composing utility classes in your HTML instead of writing custom CSS.

样式自然地在 Tailwind 中具有作用域，因为每个工具类总是做同样的事情，无论它在哪里使用 - 将工具类添加到 UI 的某个部分不会在其他地方产生一些意想不到的副作用。

¥Styles are naturally scoped with Tailwind because each utility class always does the same thing, no matter where it's used — there's no risk that adding a utility class to one part of your UI creates some unexpected side effect somewhere else.

性能(Performance)

¥Performance

使用 CSS 模块时，Vite、Parcel 和 Turbopack 等构建工具会分别处理每个 CSS 模块。这意味着如果你的项目中有 50 个 CSS 模块，Tailwind 需要单独运行 50 次，这会导致构建时间变慢，开发者体验更差。

¥When using CSS modules, build tools like Vite, Parcel, and Turbopack process each CSS module separately. That means if you have 50 CSS modules in a project, Tailwind needs to run 50 separate times, which leads to much slower build times and a worse developer experience.

显式上下文共享(Explicit context sharing)

¥Explicit context sharing

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

¥Since CSS modules are each processed separately, they have no @theme unless you import one.

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

¥This means features like @apply won't work the way you expect unless you explicitly import your global styles as reference:

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

或者，你也可以只使用 CSS 变量而不是 @apply，这具有让 Tailwind 跳过处理这些文件的额外好处，并将提高你的构建性能：

¥Alternatively, you can also just use CSS variables instead of @apply which has the added benefit of letting Tailwind skip processing those files and will improve your build performance:

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

Vue、Svelte 和 Astro(Vue, Svelte, and Astro)

¥Vue, Svelte, and Astro

Vue、Svelte 和 Astro 在组件文件中支持 <style> 块，其行为与 CSS 模块 非常相似，这意味着它们由你的构建工具完全独立地处理，并且具有所有相同的缺点。

¥Vue, Svelte, and Astro support <style> blocks in component files that behave very much like CSS modules, which means they are each processed by your build tooling totally separately and have all of the same drawbacks.

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

¥If you're using Tailwind with these tools, we recommend avoiding <style> blocks in your components and just styling things with utility classes directly in your markup, the way Tailwind is meant to be used.

如果你确实使用了 <style> 块，请确保导入全局样式作为参考，如果你希望 @apply 等功能按预期工作：

¥If you do use <style> blocks, make sure to import your global styles as reference if you want features like @apply to work as expected:

<template>
  <button><slot /></button>
</template>
<style scoped>
  @reference "../app.css";
  button {
    @apply bg-blue-500;
  }
</style>

或者只使用全局定义的 CSS 变量，而不是像 @apply 这样的功能，这些功能根本不需要 Tailwind 来处理你的组件 CSS：

¥Or just use your globally defined CSS variables instead of features like @apply, which don't require Tailwind to process your component CSS at all:

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