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 插件运行）。
语法
Tailwind CSS 缩写类名
布局
- w: width
- max-w: max-width
- h: height
- max-h: max-height
- m: margin
- mt: margin-top
- mb: margin-bottom
- ml: margin-left
- mr: margin-right
- p: padding
- pt: padding-top
- pb: padding-bottom
- pl: padding-left
- pr: padding-right
说明：m-1 中的 1 表示 4px
文本样式
- font: font-family
- text: text-color, text-alignment, text-transform, font-size
- leading：line-height
- tracking: letter-spacing
- uppercase: text-transform: uppercase
- lowercase: text-transform: lowercase
背景和边框
- bg: background-color
- border: border-style, border-width, border-color
- rounded: border-radius
- shadow: box-shadow
弹性盒子布局
- flex: display: flex
- justify: justify-content
- items: align-items
- self: align-self
- order: order
- flex-grow: flex-grow
- flex-shrink: flex-shrink
网格布局
- grid-cols: grid-template-columns
- grid-rows: grid-template-rows
- gap: grid-gap
响应式设计
- sm, md, lg, xl: 分别对应移动设备、平板、桌面、大屏幕
- hover: 鼠标悬停时的样式
- focus: 元素获取焦点时的样式
边框和分隔符
- divide: 分隔符 (border-color, border-style, border-width)
- divide-x: 水平分隔符 (border-color, border-style, border-width)
- divide-y: 垂直分隔符 (border-color, border-style, border-width)
- border-collapse: 设置边框是否合并
Flexbox 尺寸和排列
- flex-wrap: 等同于 flex-flow 中的 wrap
- flex-row, flex-row-reverse, flex-col, flex-col-reverse: flex-direction 的简写
- flex-1…flex-12: 设置 flex-grow、flex-shrink 和 flex-basis 属性
- gap-x: 水平包裹在对象（如 flex 子元素）之间的间距
- gap-y: 垂直包裹在对象（如 flex 子元素）之间的间距
- space-x: 水平排列中对象（如 flex 子元素）之间的空间
- space-y: 垂直排列中对象（如 flex 子元素）之间的空间
Z-index
- z-{n}: 设置 z-index 的值，其中 n 为正整数
动画
- animate-{name}: 向元素添加动画（使用 @keyframes 中定义的动画名称）
列表样式
- list-style-{type}: 设置列表项的类型 (disc, decimal, decimal-leading-zero)
转换和过渡
- transform: 让元素旋转、缩放、倾斜、平移等
- transition-{property}: 用于添加一个过度效果 {property} 的值是必需的。
颜色
- text-{color}: 设置文本颜色
- bg-{color}: 设置背景颜色
- border-{color}: 设置边框颜色
字体权重
- font-thin: 字体细
- font-light: 字体轻
- font-normal: 字体正常
- font-medium: 字体中等
- font-semibold: 字体半粗
- font-bold: 字体粗
- font-extrabold: 字体特粗
- font-black: 字体黑
SVG
- fill-{color}: 设置 SVG 填充颜色
- stroke-{color}: 设置 SVG 描边颜色
显示和隐藏
- hidden: 隐藏元素（display: none）
- invisible: 隐藏元素，但仍保留该元素的布局和尺寸
- visible: 显示元素
清除浮动
- clear-{direction}: 清除某个方向的浮动效果
容器
- container: 将内容限制在最大宽度的容器内部
- mx-auto: 实现水平居中（margin-left 和 margin-right 设置为 auto）
示例
- 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 引擎，而不仅仅是一个插件。