用途:为 Tailwind CSS 项目建立基础心智模型,覆盖是否选用 Tailwind、utility-first 与 BEM/CSS Modules/CSS-in-JS 的取舍、组件抽取时机、内容扫描排错等决策。
主要能力:给出四条不变量——主题(v3 的 tailwind.config.js、v4 的 @theme{})是设计唯一真源;类名必须是源码中的字面完整 token;优先在标记中组合单一职责工具类,同一组合出现 3 次以上再抽组件;依赖 Tailwind 输出的层叠顺序(base、components、utilities),不在自定义 CSS 中重复声明工具属性。同时提供四棵决策树:是否用 Tailwind、样式策略排序、何时抽组件、内容扫描检查。
使用方式:按决策树逐问判断。内容扫描方面,v4 用 @source "../node_modules/@org/pkg" 或 @source inline("class-list"),v3 扩展 content: [] 或 safelist;含方括号路径段时需转义 glob,如 v4 的 @source './[[][]]//*.{js,ts,jsx,tsx,mdx}'。自定义工具类须放在 @layer utilities(v3)或 @utility(v4)内。
适用场景:设计系统驱动、组件化 UI(React/Vue/Svelte/Solid/Astro/服务端模板)、重视包体积的新项目、已用 Figma 等 token 工具的团队、快速原型。
限制:CMS、博客编辑器或 Markdown 管道中由非开发者编写的正文、刻意违反设计系统的设计、仅五条 CSS 规则的静态页、邮件 HTML 均不建议作为主要样式层。禁止用字符串拼接或模板字面量生成类名,禁止用 @apply 清理标记,禁止在视觉容差内滥用任意值,禁止与运行时 CSS-in-JS 混用于同一组件树。v3 与 v4 的哲学、扫描模型与分层一致,差异在主题表达、内容发现与自定义工具类写法。具体性能与浏览器基线等细节资料未提供。