使用 TailwindCSS 可快速创建美观按钮，通过组合实用类实现样式：1. 基础按钮使用 bg-blue-500、text-white、py-2、px-4 和 rounded 类；2. 不同尺寸通过调整 padding 与 text 大小，如大按钮用 py-3 px-6 text-lg；3. 添加 shadow、transition、duration-300 实现阴影与动画；4. 支持轮廓、危险、禁用等变体，提升交互体验。
使用 TailwindCSS 可以非常快速地为按钮添加美观的样式，无需编写任何自定义 CSS。Tailwind 提供了丰富的实用类（utility classes），通过组合这些类，可以轻松实现现代、响应式的按钮设计。
基础按钮样式
从一个普通的 <button></button> 元素开始，应用基本的样式使其脱离浏览器默认外观：
说明：
-
bg-blue-500设置背景色为蓝色 -
hover:bg-blue-700鼠标悬停时颜色变深 -
text-white文字为白色 -
font-bold加粗文字 -
py-2 px-4上下内边距为 8px，左右为 16px -
rounded添加圆角边框
不同尺寸的按钮
通过调整 padding 和 text 大小类，快速创建多种尺寸：
立即学习“前端免费学习笔记（深入）”；
- 小按钮：
py-1 px-3 text-sm - 中等按钮：
py-2 px-4 text-base - 大按钮：
py-3 px-6 text-lg
例如大按钮：
添加阴影和过渡效果
让按钮更具质感和交互反馈：
-
shadow添加标准阴影 -
shadow-md或shadow-lg更明显的阴影 -
transition启用过渡动画 -
duration-300设置动画时长为 300ms
其他风格变体
实现常见设计模式：
-
轮廓按钮：
border border-gray-400 text-gray-700 bg-transparent hover:bg-gray-100 -
危险按钮：
bg-red-500 hover:bg-red-600 text-white -
禁用状态：
opacity-50 cursor-not-allowed
基本上就这些。Tailwind 的优势在于快速组合，无需反复切换 CSS 文件。只要记住常用类名逻辑，就能高效构建一致且美观的按钮组件。
