展开本页目录
开始前准备什么
- Node.js与npm已可运行；练习只需本地文本文件和官方@google/design.md CLI，不需要Stitch账号或付费生成。
- 固定当前CLI版本并保留版本号；DESIGN.md仍为alpha格式，升级前先在练习副本复核。
- 本课给出作者自制规则文件和预期，不把预期JSON冒充已执行的官方CLI返回。
- 准备三类规范token
- 设置导出前检查
- 生成独立CSS文件
- 核对命名空间
- 接入最小测试页面
- 更改一项并重建
- 交付可再生成的产物
1. 准备三类规范token
在DESIGN.md写primary颜色、body-md字体以及sm间距，组件引用已有路径。
先固定字体可用来源，未安装的字体不能仅靠一个名字就当加载成功。
2. 设置导出前检查
执行lint并保存报告，发现error时停止写最终theme.css。
不要用export命令的退出0替代lint，因为两者的成功条件不同。
3. 生成独立CSS文件
运行designmd export --format css-tailwind DESIGN.md，把输出保存为theme.generated.css。
不把它误当Tailwind v3的theme.extend JSON导入。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 核对命名空间
打开输出，查看实际生成的--color、--font和--spacing相关变量。
预览页按实际变量名使用，不凭记忆拼一个不存在的class。
5. 接入最小测试页面
在作者页面的构建入口引用生成CSS，显示主按钮、正文和固定间距。
若样式未生效，先检查CSS是否被打包，再查token映射，而不是改规范凑画面。
6. 更改一项并重建
只改sm间距后重新lint、export和构建，对照两次元素间距。
主色与字体应保持原样，记录预期变化和非预期漂移。
7. 交付可再生成的产物
保留DESIGN.md、生成CSS、导出命令和测试页，不手改生成文件后丢掉来源。
实际未运行Tailwind构建时，仅交付输入与待验证清单，不标样式测试通过。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 产物是Tailwind v4 @theme而非v3 JSON。
- 坏引用会被项目的lint步骤阻断。
- 只改sm时实际间距变化，颜色与字体未漂移。
常见问题
DESIGN.md导出成功，为什么还要lint？
先 lint 品牌颜色、字体、间距与组件引用，通过后运行 export --format css-tailwind 保存独立 CSS。把输出 @theme 接到实际页面并查看变量是否生效；生成文件存在不等于页面已经使用。
css-tailwind和json-tailwind有什么区别？
css-tailwind输出v4 @theme和CSS变量；json-tailwind输出v3 theme.extend配置。本课用前者，不能把两个产物混到同一个导入位置。