Tailwind CSS v4 是该框架自发布以来最大的一次底层重写。与其说是升级，不如说是一个全新的引擎。v4 的核心目标是：极致的性能和更现代的开发体验。本文介绍 Tailwind CSS v4 的架构与核心原理：
核心架构：Oxide 引擎 (The Oxide Engine)
在 v3 版本中，Tailwind 是一个基于 JavaScript 的 PostCSS 插件。虽然引入了 JIT（即时编译）模式大大提升了速度，但受限于 JavaScript 的性能瓶颈，在大型项目中构建速度依然有提升空间。
v4 的架构变化：
- Rust 驱动： v4 引入了一个名为 Oxide 的新引擎。它是用 Rust 编写的，旨在处理繁重的解析和编译任务。
- 统一的工具链： Oxide 将解析 HTML/JS 文件、解析 CSS、生成样式规则等步骤整合在一起，而不是单纯依赖 PostCSS 的通用管道。
- 性能飞跃： 官方宣称构建速度比 v3 快 10 倍以上，而在增量构建（Incremental Builds）时几乎是瞬间完成。
原理：
Oxide 不再像以前那样生成大量的 AST（抽象语法树）对象并在 JS 中传递，而是通过 Rust 的高性能并行处理能力，直接扫描源码并生成 CSS 字符串。
原理转变：CSS-First 配置 (CSS-First Configuration)
这是 v4 在使用理念上最大的变化。
- v3 方式： 你需要一个
tailwind.config.js 文件来定义颜色、字体、断点和 content 路径。
- v4 方式： 配置直接写在 CSS 文件中。
原理：
Tailwind v4 将配置视为 CSS 的一部分，利用原生的 CSS 变量和自定义指令。
@import 'tailwindcss';
@theme {
--color-primary: #3b82f6;
--font-family-sans: 'Inter', sans-serif;
--breakpoint-3xl: 1920px;
}
优势：
- 减少上下文切换： 开发者不需要在 JS 配置文件和 CSS 文件之间来回切换。
- 更符合 Web 标准： 利用现代浏览器的 CSS 变量特性，使得定义的主题变量可以直接在项目其他地方作为原生 CSS 变量使用（例如
var(--color-primary)）。
自动内容检测 (Automatic Content Detection)
v3 的痛点：
你必须在 tailwind.config.js 的 content 数组中手动配置所有包含 class 的文件路径（如 ./src/**/*.{js,jsx,ts,tsx}）。配置错了，样式就不生效。
v4 的原理：
- 智能扫描： v4 引擎会自动扫描当前项目目录，智能推断哪些文件包含 Tailwind 的类名。
- 忽略机制： 它内置了对
.gitignore 的支持，自动忽略不需要扫描的目录（如 node_modules）。
- 结果： 对绝大多数项目来说，零配置即可开始工作。
现代 CSS 特性集成
Tailwind v4 的架构设计是基于现代 CSS构建的，它抛弃了一些为了兼容旧浏览器而存在的历史包袱。
- 原生级联层 (Cascade Layers)： v4 默认使用
@layer。
- 原理： 它将
base, components, utilities 放入真正的 CSS Layer 中。这意味着你不再需要担心 CSS 的书写顺序问题，浏览器会根据 Layer 的优先级自动处理样式覆盖。
- P3 色域支持： 默认支持 OKLCH 等宽色域颜色，使颜色在现代显示器上更鲜艳。
- 相对路径解析： 在 CSS 中引用图片（如
bg-[url(./image.png)]）时，v4 会像标准 CSS 预处理器一样正确解析相对路径，而不是像 v3 那样由于复杂的构建链导致路径经常出错。
编译流水线 (Build Pipeline)
v4 的内部工作流程可以概括为以下几个步骤：
- Input (CSS)： 读取入口 CSS 文件（通常包含
@import "tailwindcss"）。
- Discovery (Rust/Oxide)：
- 引擎并行扫描项目中的 HTML/JS/TS/Vue 等文件。
- 提取所有可能是 class 的字符串（Candidates）。
- Validation & Generation：
- 将提取的字符串与设计系统（默认配置 +
@theme 定义）进行匹配。
- 如果是合法类名，立即生成对应的 CSS 规则。
- Optimization：
- 对生成的 CSS 进行排序、去重。
- 应用 CSS 变量变换。
- Output： 输出最终的 CSS 文件。
增量构建原理：
由于引擎是用 Rust 写的，它在内存中维护了文件的依赖图。当你修改一个 React 组件时，它只重新扫描该文件，通过哈希比对快速确定哪些 CSS 需要新增或删除，而不是重新编译整个项目。
只有一个依赖 (Unified Package)
在架构上，Tailwind v4 极大地简化了依赖关系。
- v3: 需要
tailwindcss, postcss, autoprefixer，可能还需要 postcss-import 等等。
- v4: 核心功能通过
tailwindcss 一个包提供（内置了 Lightning CSS 的部分功能来处理 CSS 转换）。这意味着它不再强依赖 PostCSS（虽然为了生态兼容，它仍然可以作为 PostCSS 插件运行）。
示例
- static/code/ui/css/tailwind/menu.html
- static/code/ui/css/tailwind/dark.html
总结
Tailwind CSS v4 的架构核心在于：
- Rust (Oxide) 替代 JavaScript 以换取极致性能。
- 配置下沉到 CSS 以换取更统一的开发体验。
- 拥抱现代 Web 标准（Layer, CSS Variables, OKLCH）以减少工具链的复杂性。
它是一个全职的 CSS 引擎，而不仅仅是一个插件。