直接用 rounded 类不能全局统一按钮圆角，因为它是原子类，需手动为每个按钮添加如 rounded-md；推荐用 @layer components 定义 .btn 统一应用 rounded-lg，兼顾可维护性与优先级。
为什么直接用 rounded 类不能全局统一按钮圆角
因为 Tailwind 的 rounded 是原子类，每个按钮得手动加，比如 rounded-md 或 rounded-lg。项目里几十个按钮，分散在不同组件中，靠人力加不仅易漏，还难维护——改一次圆角就得搜遍所有文件。
最稳妥的方案：覆盖默认 btn 类并配合 @layer components
假设你已用 PostCSS + Tailwind，并有自定义 btn 基础样式（如 btn 类用于所有按钮），推荐在 tailwind.config.js 的 theme.extend.container 外，用 @layer components 统一定义：
@layer components {
.btn {
@apply px-4 py-2 font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2;
}
}
这样所有带 class="btn" 的按钮自动带 rounded-lg，无需重复写圆角类。若需差异化（如小按钮用 rounded-md），可额外定义 btn-sm 并覆盖 rounded：
.btn-sm {
@apply rounded-md;
}
如果不用自定义类，只能靠插件或配置扩展 rounded
Tailwind 默认只提供有限的 rounded 值（sm、md、lg、full 等）。想让所有 btn 默认用 rounded-xl，又不想改 HTML，有两个办法：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的theme.extend.borderRadius中添加新值，再用rounded-xl类——但这仍需手动加，没解决“统一”问题 - 用
plugin注入全局规则，例如在plugins数组中加：
function({ addComponents }) {
addComponents({
'.btn': {
borderRadius: '0.75rem', // 对应 rounded-xl
}
})
}
注意：这种方式绕过 Tailwind 的原子类机制，后续若想单个按钮覆盖圆角（如加 rounded-none），需确保该类的 CSS 优先级更高，否则会被 .btn 覆盖。
容易踩的坑：!important、层级冲突和 PurgeCSS 误删
常见错误包括：
- 在
@layer components里写!important—— 不必要，且破坏 Tailwind 的响应式前缀逻辑（如md:rounded-full会失效） - 把自定义
.btn写在@layer utilities里 —— 导致优先级低于原子类，rounded-sm仍会覆盖它 - 开启
purge（现为content）后，若 HTML 中没出现rounded-lg字符串，该类可能被移除 —— 所以建议保留至少一个地方显式使用，或改用@layer components方式规避 Purge
真正统一圆角的关键不在多写几个 rounded- 类，而在控制“谁负责应用这个圆角”。要么靠约定（所有按钮必须带 btn），要么靠 CSS 层级（用 @layer components 锁死），别指望 Tailwind 自动猜你想要什么圆角。
