应优先在配置文件中通过 theme.extend 或 shortcuts 定义语义化按钮样式，而非在 HTML 中堆砌原子 class；Tailwind 用 theme.extend.colors/spacing/borderRadius，Bootstrap 5 重写 SCSS 变量，UnoCSS 用 shortcuts + theme.colors；生效前需重启服务、核对 class 名与插件启用、确保 CSS 加载顺序及变量引用正确。
Tailwind CSS 中改按钮样式：别动 class，改 theme.extend
直接覆盖默认 btn 类或手写一堆 bg-blue-500 hover:bg-blue-600 rounded-md px-4 py-2 是最慢的路。Tailwind 的设计哲学是“用配置驱动样式”，自定义按钮应优先走 tailwind.config.js 的 theme.extend 配置，而不是在 HTML 里堆 class。
常见错误是把按钮样式写死在组件里，导致换主题、调色、适配暗色模式时全要手动搜替换。正确做法是把按钮的尺寸、间距、圆角、阴影等抽成可复用的 theme token：
-
theme.extend.spacing控制px-3/py-2等基础间距单位 -
theme.extend.borderRadius定义rounded-btn这类语义化圆角（比如'btn': '6px'） -
theme.extend.colors扩展primary、danger等语义色，而非硬写bg-red-500
这样后续只需写 class="btn btn-primary"，所有表现由配置统一控制，改一处，全局生效。
Bootstrap 5 自定义按钮：避开 !important 和重复 btn class 堆叠
Bootstrap 5 默认的 btn 类带大量声明（包括 display、font-weight、border），直接写 my-btn { background: #2a5c82; } 很可能被覆盖。真正有效的办法是利用其 SCSS 变量体系，在 _custom.scss 中重写变量再编译：
立即学习“前端免费学习笔记（深入）”；
- 修改
$btn-padding-y、$btn-border-radius等底层变量，比覆盖 CSS 更彻底 - 用
@include button-variant(...)复用原生混合宏，避免漏掉 focus、disabled 状态 - 不要新建独立 class 如
btn-my-style并重复写所有属性——它和btn冲突，且无法继承btn-sm、btn-outline等组合能力
如果你没接入 SCSS 编译流程，那只能用 data-bs-theme="dark" 这类内置机制配合 :root 变量覆盖，但灵活性大幅下降。
UnoCSS 中如何让 btn 成为原子 class：用 shortcuts + theme
UnoCSS 不像 Tailwind 那样自带 btn，但你可以用 shortcuts 把一串原子 class 封装成语义名，并绑定到主题变量上：
export default defineConfig({
shortcuts: [
['btn', 'px-4 py-2 font-medium rounded inline-flex items-center justify-center transition-colors'],
['btn-primary', 'bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50'],
],
theme: {
colors: {
primary: 'var(--color-primary, #2563eb)',
// 后续可通过 :root { --color-primary: #3b82f6 } 动态切换
}
}
})
关键点在于：shortcuts 是编译期展开的，不是运行时 JS；theme.colors 支持 CSS 变量回退，适合主题切换。别试图用 attributify 模式写 <button btn="primary"></button> —— 它不支持动态值，且破坏 class 可预测性。
为什么改了变量但按钮没变？检查这三处
改完配置却没生效，90% 是卡在这三个地方：
- 没重启开发服务器：Tailwind/UnoCSS 的配置变更需要热重载或重启
npm run dev - class 名拼错或未启用插件：比如 UnoCSS 的
shortcuts要确保presets: [presetUno()]已开启；Tailwind 的extend要确认没写在plugins里 - CSS 加载顺序问题：自定义样式表如果放在框架 CSS 之后，又用了非原子 class 覆盖，就会被原框架样式压住——查浏览器开发者工具里
.btn的 computed styles，看哪条声明被划掉
最隐蔽的问题是：你改了 theme.colors.primary，但按钮 class 里写的还是 bg-blue-500，根本没引用变量。变量只对 bg-primary 这类用法生效。
