把样式集中管理：设计令牌与分层 CSS

如果希望一个站点将来能被整体换肤，那么从第一天起就该约定：组件不写样式。

分层

• base：元素级排版，字体、字号、行距、列表与表格的默认表现；
• components：结构性布局钩子，只回答「内容放在哪里」；
• utilities：极少量的一次性覆盖。

令牌

颜色、间距、字号这些反复出现的值，统一收进 Tailwind 配置的 theme.extend。 换设计系统时，改的是令牌，而不是散落在几十个组件里的 class 串。

收益

当设计规范到位后，替换工作基本集中在两个文件：

1. tailwind.config.js：替换令牌；
2. styles/globals.css：替换基础排版与布局钩子。

页面与组件的 JSX 结构可以一行都不动，这就是「毛坯房」阶段真正的价值。