兼容性

浏览器支持

Tailwind CSS v4.0 专为现代浏览器设计和测试，框架的核心功能特别依赖于以下浏览器版本：

• Chrome 120 （2023年12月发布）
• 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 文件，无需使用单独的预处理工具。

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

在这个例子中，typography.css 文件会被 Tailwind 为您打包到编译后的 CSS 中，无需使用 Sass 或 postcss-import 等其他工具。

变量

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

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

Tailwind 在内部大量使用 CSS 变量，所以如果您可以在项目中使用 Tailwind，那么您就可以使用原生 CSS 变量。

嵌套

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

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

Tailwind 会为您展平这些嵌套的 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() 等数学函数，所以也不再需要依赖预处理器来实现这些功能。

CSS 模块

Tailwind 与 CSS 模块兼容，如果您要在已经使用它们的项目中引入 Tailwind，两者可以共存，但是如果可以避免，我们不推荐同时使用 CSS 模块和 Tailwind。

作用域问题

CSS 模块旨在解决的作用域问题在使用工具类在 HTML 中组合样式时根本不存在。

使用 Tailwind 时，样式天然就有作用域，因为每个工具类无论在哪里使用都做同样的事情 —— 无需担心在 UI 的某个部分添加工具类会在其他地方产生意外的副作用。

性能

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

显式的上下文共享

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

这意味着像 @apply 这样的功能不会按预期工作，除非您明确引用您的全局样式：

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

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

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

Vue、Svelte 和 Astro

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

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

如果您确实使用 <style> 块，请确保导入您的全局样式作为参考，以便像 @apply 这样的功能能够按预期工作：

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

或者直接使用全局定义的 CSS 变量，而不是使用像 @apply 这样的功能，这样完全不需要 Tailwind 处理您的组件 CSS：

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