用途:在 Tailwind CSS v4 的 CSS-first 配置模型中搭建或修改配置。v4 把配置面从 JavaScript 移入 CSS:令牌是 @theme 中的 CSS 变量,自定义工具类是 CSS at-rule,插件、变体与内容路径均在 CSS 中声明;JS 配置文件仅通过 @config "./tailwind.config.js" 选择性启用,用于迁移。
主要能力:最小安装为 @import "tailwindcss";,替代 v3 的 JS 配置、PostCSS 插件链与 @tailwind 指令。@theme 定义令牌(如 --color-mint-500、--font-display、--breakpoint-3xl),命名空间前缀决定生成的工具类族;@theme inline 用于令牌值引用其他 var(),@theme static 用于仅被 JS 读取的令牌;可用 --color-*: initial 重置命名空间。@source 添加或排除扫描路径,@source inline 为动态类名提供 safelist(支持花括号与范围展开),@source none 关闭自动扫描。@plugin 加载 v3 风格 JS 插件;@utility 定义自定义工具类(支持 --value、--modifier、--alpha、--spacing 等参数化写法);@variant 在 CSS 内应用变体,@custom-variant 注册新变体;@reference 为 Vue/Svelte/Astro/CSS Modules 的 scoped 样式块提供主题上下文,避免 @apply 报未知工具类;@apply 需置于 @layer components 等层内;@layer 使用原生级联层,顺序为 theme < base < components < utilities。
限制与注意:v4 已移除 @tailwind base/components/utilities,不可再使用;令牌必须使用 Tailwind 识别的命名空间前缀,否则不生成工具类;同一令牌不要同时定义在 @theme 与 JS 配置的 theme.extend 中;scoped 样式块不要用 @import "tailwindcss",应使用 @reference。具体浏览器基线、完整命名空间表与框架集成细节见其 references 文件,本资料未逐一展开。