Tailwind 配置与设计令牌
Tailwind 定制的主战场是 tailwind.config.js，核心概念是设计令牌（Design Token）：把颜色、间距、圆角、字体这些设计规范定义成配置，之后所有工具类都从这份配置生成。
最常用的扩展是品牌色：在 theme.extend.colors 里定义 brand: { 500: '#6366f1', 700: '#4338ca' }，立刻就能使用 bg-brand-500 hover:bg-brand-700——新增颜色自动获得全套工具类（text-brand-500、border-brand-500……）。同理可加自定义间距、圆角、阴影、字体。
两条纪律值得遵守：只写 extend 不覆盖默认（除非刻意要禁用默认调色板），保留灵活性；团队约定令牌优先——设计稿上的颜色必须沉淀为令牌再使用，禁止在 HTML 里直接写 bg-[#6366f1] 这类任意值（应急可用，泛滥成灾）。令牌统一后，「全站换主题色」就是改配置文件里的一行值。
本节要点tailwind.config.js 的 theme.extend 定义设计令牌；新增 brand 色自动生成全套工具类；颜色沉淀为令牌，少用任意值语法。
代码
// tailwind.config.js：把设计规范变成"令牌"
/** @type {import('tailwindcss').Config} */
export default {
// 扫描范围：这些文件里出现的类名才会被生成
content: ['./index.html', './src/**/*.{js,ts,vue,jsx,tsx}'],
theme: {
extend: { // 只扩展，不覆盖默认值
colors: {
brand: {
500: '#6366f1', // → bg-brand-500 / text-brand-500
700: '#4338ca', // → hover:bg-brand-700
},
},
spacing: {
'18': '4.5rem', // → p-18 / m-18 / w-18 ...
},
borderRadius: { xl: '1rem' }, // → rounded-xl
fontFamily: {
sans: ['PingFang SC', 'sans-serif'],
},
},
},
plugins: [],
};
// HTML 中直接使用：
// <button class="bg-brand-500 hover:bg-brand-700 rounded-xl p-18">
// 全站换色 = 改这一处配置📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读