tailwind按钮需组合工具类实现，如bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition；尺寸靠py/px/text调节，响应式用断点前缀；禁用态须加disabled属性与cursor-not-allowed；轮廓按钮用border+hover:bg；加载按钮用flex+animate-spin；不可直接复制他人类名，因原子类语义敏感且可能被purgecss剔除。
bg-blue-500 这类类名不是“快捷方式”，而是按钮体系的起点——Tailwind 没有预设按钮组件，所有按钮样式都靠组合工具类实现，不写一行自定义 CSS 就能覆盖绝大多数场景。
如何用基础工具类搭出可用按钮
一个真正能用的按钮，至少得有背景、文字、内边距、圆角和悬停反馈。直接套用这组类最稳妥：bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition。
其中 py-2 px-4 对应上下 0.5rem / 左右 1rem 内边距，rounded 是轻微圆角（等价于 border-radius: 0.25rem），transition 默认启用颜色过渡，无需指定属性。
常见踩坑点：
• 忘加 hover:bg-* —— 按钮看起来“死”的，用户没反馈感
• 用 text-black 配深色背景 —— 对比度不足，可访问性失败
• 把 rounded-full 和 py-1 同时用 —— 高度太小，圆角会塌陷成椭圆
怎么控制按钮尺寸和响应式行为
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。
注意：w-full 在小屏按钮组里很常用，但别忘了配 sm:w-auto，否则桌面端按钮会撑满整行。
禁用态、轮廓按钮和加载状态怎么写
禁用按钮不能只靠 opacity-50，必须同步加 cursor-not-allowed 和 disabled 属性，否则键盘用户仍可聚焦、屏幕阅读器无法识别状态：<button class="bg-gray-400 text-white py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>提交</button>
轮廓按钮本质是“无背景 + 有边框”：border border-blue-500 text-blue-500 hover:bg-blue-50，关键在 hover:bg-blue-50 提供轻微反馈，否则悬停无变化。
加载按钮需动态切换内容，但静态写法可先预留结构：<button class="flex items-center gap-2"><svg class="animate-spin h-4 w-4"></svg>加载中</button>，重点是 flex items-center gap-2 对齐图标与文字，animate-spin 自带旋转动画。
为什么不能直接复制粘贴别人写的按钮类
Tailwind 的类名是原子级的，bg-indigo-600 和 bg-purple-600 渲染效果差异肉眼难辨，但语义不同；shadow 和 shadow-md 阴影深度差一倍，却都叫“阴影”。更麻烦的是，项目里若启用了 purgeCSS 或自定义 tailwind.config.js，没在代码里显式出现的类（比如你从博客抄来的 focus:ring-offset-4）可能根本不会被生成。
所以实际做法是：记清几组核心组合（颜色+间距+圆角+交互），遇到新需求时现场拼，而不是囤积“万能按钮代码块”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
