Namespace 映射室｜Tailwind CSS v4

01 / 选择 NAMESPACE

沿着编译路线看映射

① 主题变量 --color-harbor-500 #147d76

② Tailwind 识别 这是颜色 token

同一个值可进入背景、文本、边框、填充等颜色工具。

③ 可用类与变体

bg-harbor-500 text-harbor-500 border-harbor-500 hover:bg-harbor-500

02 / 变量换肤

选择一套品牌 token 港湾冷静、可信樱果温暖、有活力苔原自然、克制

HTML 始终是

<article class="
 bg-harbor-50
 border-harbor-500
 rounded-ticket shadow-ticket
">

WEEKEND PASS

颜色类、边框类和文字类一起读取同一套 namespace，品牌不会只换了按钮、却忘了标题。

票

03 / EXTEND VS REPLACE

保留默认值

@theme {
  --color-harbor-500: #147d76;
  --color-harbor-700: #0c4f4b;
}

只加入新名字，默认的 blue-500、red-500 等仍然存在。适合大多数渐进式品牌定制。

下方状态模拟两次独立构建的结果；右侧组件仍用本页已编译的真实工具类展示外观。

bg-blue-500

bg-harbor-500

扩展模式：默认色与品牌色可以并存。