← 返回博客前端技术

Tailwind CSS v4 新特性全解析

Tailwind v4 引入了全新的 CSS-first 配置方式，彻底抛弃 tailwind.config.js，本文梳理核心变化与迁移要点。

发布日期 2026年02月04日

作者 admin

阅读时长 1 min read

Tailwind CSS v4 是一次大版本重写，不只是功能更新，而是设计哲学的转变——从 JS 配置走向 CSS-first。

@theme：CSS 里定义 Token

v4 完全移除了 tailwind.config.js 中的 theme 配置，改为在 CSS 文件中用 @theme 指令直接定义设计 Token，这些 Token 自动映射为 CSS 变量和功能类名。

@theme {
  --color-brand: oklch(65% 0.25 145);
  --font-display: "Syne", sans-serif;
  --radius-card: 12px;
}

v4 内置 Lightning CSS 作为 PostCSS 替代方案，自动处理浏览器前缀、现代 CSS 降级，构建速度提升显著。

容器查询功能类名现已内置，无需额外插件。@container、@sm:grid-cols-2 这样的写法开箱即用。

v4 是破坏性更新。自定义颜色、字体、间距的写法全部变化。官方提供了迁移工具 npx @tailwindcss/upgrade，但对于大型项目还是建议逐模块迁移。