aicode8
tailwindcssoverview更新于 2026-09-10

Tailwind v4 对比 v3

解析 Tailwind v4 在配置方式、构建性能与主题系统上相对 v3 的核心差异。

生产环境配置

tailwindcss 4.x

app.css — Tailwind v4 CSS-first theme (no tailwind.config.js)

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.62 0.19 264);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

同一份配置，换运行时

[install]
exact = true
frozenLockfile = true

[run]
bun = true

verified bun 1.1.x

Core Failure Surface

解析 Tailwind v4 在配置方式、构建性能与主题系统上相对 v3 的核心差异。

Production Configuration

Verified against tailwindcss 4.x. app.css — Tailwind v4 CSS-first theme (no tailwind.config.js)

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.62 0.19 264);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Troubleshooting Nodes

Tailwind v4 与 v3 配置最大区别是什么？

v4 抛弃 tailwind.config.js，主题全部用 CSS 的 @theme 声明；升级到 v4 必须删旧 config 并装 @tailwindcss/vite，否则构建报模块缺失。

Tailwind v4 编译产物如何在边缘长期缓存？

编译后的 CSS 走内容哈希文件名，配 immutable 长缓存；HTML 引用新哈希即自动失效，无需手动清缓存。

Verification Gate

Every asset in this matrix must pass a full static build before it is eligible for manual review. Automated publishing is disabled by design.

常见问题与避坑

Tailwind v4 与 v3 配置最大区别是什么？

v4 抛弃 tailwind.config.js，主题全部用 CSS 的 @theme 声明；升级到 v4 必须删旧 config 并装 @tailwindcss/vite，否则构建报模块缺失。

Tailwind v4 编译产物如何在边缘长期缓存？

编译后的 CSS 走内容哈希文件名，配 immutable 长缓存；HTML 引用新哈希即自动失效，无需手动清缓存。