兼容性

浏览器支持(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月发布)
• Safari 16.4 (2023年3月发布)
• Firefox 128 (2024年7月发布)

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.

如果你不确定某个现代平台功能是否受支持，Can I use 数据库是一个很好的资源。

🌐 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)

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 一起使用一样。

由于 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)

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";

在此示例中，typography.css 文件将由 Tailwind 打包到你的编译 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)

所有现代浏览器都支持原生 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)

在底层，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)

在 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)

在使用像 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)

Tailwind 与 CSS 模块兼容，如果你在一个已经使用了 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)

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)

在使用 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)

由于 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 和 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>