15. 兼容性与浏览器要求

Tailwind CSS v4 是为现代浏览器设计的，放弃了对老旧浏览器的支持。

最低浏览器版本

浏览器	最低版本	发布时间
Chrome	111	2023 年 3 月
Safari	16.4	2023 年 3 月
Firefox	128	2024 年 7 月

如果你的用户还在用 IE 或者老版本浏览器，v4 不适合你。这种情况要么降级到 v3（3.4.x 仍支持到 2027 年 2 月），要么用 polyfill。

依赖的 CSS 原生特性

Tailwind v4 大量使用现代 CSS 特性，这些在目标浏览器里都已原生支持：

• 原生级联层 @layer：样式分层管理
• :has() 选择器：父元素选择
• CSS 自定义属性（变量）：主题系统基石
• 嵌套 CSS：不需要预处理器
• color-mix()：颜色运算

还有一些实验性特性是可选的，比如 field-sizing: content、@starting-style、text-wrap: balance。用了但不支持的浏览器会静默忽略，不会报错。

不确定某个特性支不支持？查 Can I use。

不需要 Sass / Less / Stylus

v4 不需要任何 CSS 预处理器。Tailwind 本身就是你的预处理器。

官方原话（来源：Tailwind CSS 官方文档）：“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.”

你之前在 Sass 里常用的功能，Tailwind 都能替代：

Sass 功能	Tailwind 替代方案
变量	CSS 自定义属性 / @theme
嵌套	原生 CSS 嵌套（Lightning CSS 处理）
Mixins	提取组件 / @apply
循环	按需生成，不需要预定义
darken()/lighten()	调色板预设色阶 / color-mix()
@import	Tailwind 自动打包

CSS Modules 兼容

Tailwind 能跟 CSS Modules 一起用，但不推荐。原因：

性能问题：每个 CSS Module 是独立处理的，50 个模块意味着 Tailwind 要跑 50 次。

作用域问题：CSS Module 里没有 @theme，@apply 不工作。需要显式引入：

/* Button.module.css */
@reference "../app.css";

button {
  @apply bg-blue-500;
}

或者直接用 CSS 变量：

/* Button.module.css */
button {
  background-color: var(--color-blue-500);
}

后者更好——Tailwind 不需要处理这个文件，构建更快。

Vue / Svelte / Astro 的 scoped style

跟 CSS Modules 类似的问题。这些框架的 <style scoped> 也是独立处理的。

推荐做法：直接在模板里用工具类，不用 scoped style。

如果不得不用 scoped style，同样要 @reference 引入全局样式：

<style scoped>
@reference "../app.css";

button {
  @apply bg-blue-500;
}
</style>

PostCSS 插件兼容

Tailwind 本身就是一个 PostCSS 插件，可以跟其他 PostCSS 插件一起用。常见组合：

• autoprefixer：v4 不需要，内部已处理
• postcss-nested：v4 不需要，Lightning CSS 处理嵌套
• cssnano：生产压缩，可以加

检查兼容性

如果你不确定项目能不能用 v4，跑一下这个检查：

1. 目标浏览器版本 >= Chrome 111 / Safari 16.4 / Firefox 128
2. 项目不依赖 Sass 特有功能（或愿意迁移）
3. 没有大量 CSS Modules 需要处理

三个都满足？放心用 v4。

下一章我们开始布局篇，先看 Display 和定位。