基础按钮必须包含 py-2 px-4、rounded、transition、focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 和 hover:bg-*，以保障可访问性、交互反馈与视觉一致性。
Tailwind CSS 本身不提供预设的按钮组件，所谓“精美”必须靠组合工具类实现——直接堆 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded 能跑，但容易忽略可访问性、响应式断点、禁用态语义和 PurgeCSS 误删风险。
基础按钮必须包含哪些类？
一个真正可用的按钮，不能只靠视觉，还得有交互反馈和可访问性支撑：
-
py-2 px-4提供合理内边距（上下 0.5rem，左右 1rem），太小如py-1配rounded-full会导致圆角塌陷成椭圆 -
rounded或rounded-md控制圆角，rounded等价于border-radius: 0.25rem，比rounded-lg更通用 -
transition必须加，否则hover:bg-变化是突变的；默认启用颜色过渡，无需写transition-colors -
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500是焦点可访问性的底线，否则键盘用户无法感知当前焦点 - 忘加
hover:bg-是最常见错误——按钮看起来“死”的，用户没反馈感
尺寸和响应式怎么控制？
Tailwind 没有 btn-sm 这类抽象尺寸类，所有尺寸都靠 py/px/text 组合，且必须考虑断点适配：
- 小按钮：
py-1 px-2 text-sm（移动端常用） - 中按钮（默认）：
py-2 px-4 text-base - 大按钮：
py-3 px-6 text-lg - 响应式切换示例：
py-1 px-2 text-sm md:py-3 md:px-6 md:text-lg，注意md:前缀必须在tailwind.config.js的theme.screens中定义 - 全宽按钮慎用
w-full：小屏合适，桌面端建议补sm:w-auto，否则按钮撑满整行破坏布局
禁用态和轮廓按钮怎么写才安全？
禁用按钮不是视觉降级那么简单，必须同步处理语义、行为和可访问性：
- 禁用按钮必须同时满足三要素：
disabled属性 +opacity-50+cursor-not-allowed；只加opacity-50会导致键盘仍可聚焦、屏幕阅读器无法识别状态 - 轮廓按钮本质是“无背景 + 有边框”，推荐写法：
border border-blue-500 text-blue-500 hover:bg-blue-50；关键在hover:bg-blue-50提供轻微反馈，否则悬停无变化，体验断裂 - 危险按钮用
bg-red-500 hover:bg-red-600 text-white即可，但注意红色背景配text-white是硬性对比度要求，不能用text-gray-200
自定义按钮类名时最容易踩的坑
用 @layer components 定义 .btn、.btn-primary 是推荐做法，但实际落地常出问题：
- 必须确保
tailwind.config.js的content字段已启用并正确扫描到自定义 CSS 文件，否则 PurgeCSS 会把.btn类当无效代码删掉 -
@layer components必须放在@tailwind base之后、@tailwind utilities之前，顺序错会导致@apply失效 - 不要在 Vue/React 单文件组件的
<style></style>里用@apply定义按钮——多个组件重复写，改颜色得全局搜；更严重的是 PurgeCSS 可能因未在 HTML 中显式出现而误删类名 - 避免在
@apply中硬编码值，比如@apply w-32；应优先用语义化工具类组合，保持系统一致性
真正难的不是写出一个好看的按钮，而是让所有按钮在禁用、聚焦、悬停、小屏、键盘导航、屏幕阅读器下都表现一致——这些细节一旦漏掉，就不是“精美”，而是“半成品”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
