Tailwind CSS 4.0 深度解析

Tailwind CSS 4.0 是一次重大更新，带来了全新的架构和开发体验。

Oxide 引擎

Tailwind CSS 4.0 使用 Rust 编写的新引擎 Oxide：

• 构建速度提升 10 倍以上
• 更小的内存占用
• 原生支持所有现代浏览器特性

新的配置方式

不再需要 tailwind.config.js，直接在 CSS 中配置：

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-family-display: "Inter", sans-serif;
}

原生 CSS 嵌套

无需 PostCSS 插件即可使用嵌套语法：

.card {
  &:hover {
    @apply shadow-lg;
  }

  & .title {
    @apply text-xl font-bold;
  }
}

自动内容检测

不再需要配置 content 选项，Tailwind 会自动检测源文件。

兼容性

完全向后兼容 3.x 版本，升级过程平滑无阻。