tailwind

Tailwind CSS 最佳实践

Tailwind CSS v4 指南，按模块化规则组织。涵盖实用类优先模型、@theme 变量、响应式／状态变体、自定义样式、性能、无障碍，以及用于直接从 Figma 变量生成设计令牌的 Figma → Tailwind 主题工作流。

路由：加载哪个规则文件

如果要设置 Tailwind 或了解实用类的工作方式： → 阅读 rules/core-utility-model.md

如果要处理主题变量（@theme）、设计令牌、颜色、字体、间距： → 阅读 rules/core-theme-variables.md

如果要处理响应式设计、悬停／焦点状态、深色模式或自定义变体： → 阅读 rules/core-responsive-and-states.md

如果要添加自定义 CSS、组件类、基础样式或自定义实用类： → 阅读 rules/core-custom-styles.md

如果要优化构建体积、清除未使用的类或配置内容检测： → 阅读 rules/perf-purging-and-scanning.md

如果要处理无障碍或深色模式策略： → 阅读 rules/a11y-and-dark-mode.md

如果要将 Figma 变量／设计令牌转换为 Tailwind v4 主题 CSS： → 阅读 rules/figma-to-theme-workflow.md + 查看 figma-tokens/ 模板

规则索引

主题	描述	文件
章节概览	分类和阅读顺序	rules/_sections.md
实用类模型	实用类优先原则、组合类、任意值	rules/core-utility-model.md
主题变量	@theme 指令、命名空间、扩展／覆盖、inline／static	rules/core-theme-variables.md
响应式与状态	断点、悬停／焦点／深色变体、自定义变体	rules/core-responsive-and-states.md
自定义样式	@layer、@utility、@variant、组件类	rules/core-custom-styles.md
性能	内容检测、JIT、构建优化	rules/perf-purging-and-scanning.md
无障碍与深色模式	无障碍实用类、深色模式模式	rules/a11y-and-dark-mode.md
Figma 工作流	Agent 工作流：Figma 变量 → Tailwind @theme CSS	rules/figma-to-theme-workflow.md

Figma → Tailwind 主题工作流

此技能包含专用的 Agent 工作流，可将 Figma 设计变量转换为 Tailwind v4 @theme CSS 文件。工作流详见 rules/figma-to-theme-workflow.md，并使用 figma-tokens/ 中带注释的模板作为输出目标。

**如何触发：**将 Figma CSS 变量粘贴到聊天中，并让 Agent 生成 Tailwind 主题文件。

figma-tokens/ 中的模板文件：

• colors.css — --color-* 命名空间
• typography.css — --font-*、--text-*、--font-weight-*、--tracking-*、--leading-*
• spacing.css — --spacing 和 --spacing-*
• radius-shadows.css — --radius-*、--shadow-*
• breakpoints.css — --breakpoint-*

按优先级划分的规则类别

优先级	类别	影响	前缀
1	实用类模型与主题	CRITICAL	core-
2	响应式与状态	HIGH	core-
3	自定义样式	HIGH	core-
4	Figma 工作流	HIGH	（独立）
5	性能	MEDIUM-HIGH	perf-
6	无障碍	MEDIUM	a11y-

覆盖范围与维护

• 覆盖范围映射：rules/_coverage-map.md
• 来源：https://tailwindcss.com/docs (v4.2)
• 当 Tailwind 发布会导致 @theme 发生破坏性变更的新主／次版本时更新。