tailwind 默认不重置 button 内边距，因其被 @tailwindcss/forms 插件排除；需手动全局（button { padding: 0; border-width: 0; }）或按需（px-0 py-0 等）重置，并注意可点击区域、圆角及 focus 轮廓适配。
Tailwind 默认不重置 <button></button> 的内边距，它直接继承浏览器原生样式——这意味着 Chrome、Firefox、Safari 下的 button 会有不同默认 padding（如 Chrome 给 px-3 py-2 级别，Safari 可能更紧凑），导致视觉不一致或与设计稿对不上。
为什么 button 没有被 @tailwindcss/forms 插件重置
插件明确排除 <button></button>：它的作用范围仅限于语义化表单控件（input、select、textarea、checkbox、radio）。button 被视为交互容器而非数据输入控件，所以不会被自动归一化。
- 即使你已正确安装并启用
@tailwindcss/forms，button的padding依然原样保留 - 插件注入的
@layer base规则里查不到button相关重置声明 - 想靠
list-none或appearance-none单独清掉按钮内边距？没用——appearance-none对button无效，且它不改变padding
手动重置 button 内边距的两种可靠方式
必须显式覆盖。推荐以下任一方案，避免依赖浏览器默认值：
- 全局重置（推荐）：在
@layer base中添加：button { padding: 0; border-width: 0; }—— 注意要放在@tailwind base之后，且确保该 CSS 文件被引入 - 按需重置（更灵活）：给需要统一的按钮加
px-0 py-0，再配合font-normal和align-middle消除文字基线偏移 - 若用
flex包裹按钮，额外加items-center防止垂直错位；button在 flex 容器中默认align-self: auto，但原生padding差异会让它“看起来”没居中
重置后要注意的兼容性细节
清空 padding 后，按钮内容会紧贴边界，容易误点或视觉压迫。务必补足最小可点击区域：
- 移动端至少保证
h-10 min-w-10（约 40×40px），否则违反 WCAG 触摸目标要求 - 不要只写
py-2 px-4就完事——检查theme.spacing是否被自定义过；如果项目把spacing[2]改成了'6px'，那py-2就只有 6px，不够安全 -
border-radius建议和padding协同调整：比如py-2 px-4 rounded-md是常见组合，但若重置为py-0 px-0，就得单独加rounded并确认圆角不被裁切
最常被忽略的是：重置 button 内边距后，:focus 状态的轮廓（outline）可能紧贴文字甚至被截断。记得检查 outline-offset 或改用 ring 类替代原生 outline。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
