用 tailwind.config.js 锁定基础规范需在 theme 或 theme.extend 中完整定义 colors、spacing、fontSize 等，确保 utility class 仅来源于配置值；插件比 @layer 更适合扩展原子能力，因其支持响应式、PurgeCSS 和参数化；content 配置须精准覆盖所有模板文件路径，禁用 node_modules；禁止绕过设计约束的内联样式或 className 拼接，应通过配置扩展并配合 TypeScript 类型校验保障一致性。
如何用 tailwind.config.js 锁定颜色、间距、字体等基础规范
Tailwind 的一致性不靠手写 class，而靠配置文件里把变量“焊死”。一旦在 theme.extend 或 theme 里明确定义了 colors、spacing、fontSize，所有生成的 utility class 就只能从这些值里出——没配的值，连 mt-[17px] 都写不出来（除非开 arbitraryValue，但那是破坏一致性的后门）。
常见错误是只改了 defaultTheme 里的注释示例，却没把它 assign 到 theme 下，结果自定义值根本没生效。
- 颜色必须用对象形式完整覆盖，比如
colors: { primary: '#2563eb', secondary: '#64748b' }，不能只写primary: '#2563eb'（会丢失 gray / red 等默认色） - 间距建议用
spacing统一设为 4px 倍数（如{ '1': '0.25rem', '2': '0.5rem', '3': '0.75rem', '4': '1rem' }），避免出现mb-2.5这类非标值 - 字体大小若需响应式，直接在
fontSize里配数组：'lg': ['1.125rem', { lineHeight: '1.75rem', letterSpacing: '-0.01em' }]，别依赖外部 CSS 覆盖 line-height
为什么 plugin 比 @layer 更适合扩展设计系统原子能力
当你需要新增一类 utility，比如 shadow-outline 或 ring-focus，用插件注册比在 CSS 文件里写 @layer utilities 更可靠。插件能确保 class 名被 Tailwind 的扫描器识别、参与 PurgeCSS 清理，并且支持配置参数（比如可配 ring 宽度或阴影模糊度）。
容易踩的坑是：插件返回的 addUtilities 没加 variants，导致 hover:shadow-outline 不生效；或者在插件里用了未声明的 theme() 变量，构建时报 Cannot read property 'xxx' of undefined。
- 插件函数必须返回对象，且
addUtilities和addBase需显式调用，不能只 return CSS 字符串 - 若要支持响应式，得手动在
addUtilities第二个参数传{ variants: ['responsive', 'hover', 'focus'] } - 所有依赖的 theme key（如
theme('ringWidth.DEFAULT')）必须已在tailwind.config.js的theme中正确定义，否则开发服务器会静默失败
如何让 content 配置不漏扫、不误删 class
PurgeCSS 的 content 是设计系统落地的守门员。配窄了，自定义 class（比如插件生成的 sr-only-focusable）会被删掉；配宽了，node_modules 里一堆无关 class 全塞进最终 CSS，体积暴涨。
典型错误是写成 content: ['./src/**/*.{js,ts,jsx,tsx}'] 却忘了 .astro 或 .svelte 文件，或者用 ./**/*.html 扫到测试用的临时 HTML，把 demo class 也打进生产包。
- 务必包含所有模板类文件路径：Astro 项目要加
./src/**/*.astro，Svelte 加./src/**/*.svelte，Vue 加./src/**/*.vue - 禁止用
./node_modules/**—— Tailwind 自带的预设已足够，额外扫描只会拖慢构建且引入冗余 - 如果用了运行时 class 拼接（如
class={`${base} ${isHovered ? 'hover:opacity-100' : ''}`），必须启用safelist，例如['hover:opacity-100', /text-[a-z]+-/]
为什么不要在组件里写 style 或 className 拼接逻辑来绕过设计约束
当业务压着要“这个按钮比标准高 2px”，有人会写 className="h-10 pt-0.5"，这等于在配置系统上凿洞。下一次就要 “再加 1px 圆角”，再下一次就是 “文字颜色用 #3b82f6 而不是 primary”。设计系统就塌了。
真正该做的是：回到 tailwind.config.js，在 theme.extend.spacing 里加一个 '10.5': '2.625rem'，然后统一用 h-[10.5] —— 所有使用点都可见、可搜、可审计。
最常被忽略的一点是：团队协作时，没人会去翻 config 文件查有没有 spacing['10.5']。所以必须配合代码提示——用 TypeScript 写一个 type ValidSpacing = keyof typeof spacing，再封装 cn() 工具函数做运行时校验，才能把“不一致”挡在键盘敲下之前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
