使用 Tailwindcss 可通过实用类快速设置按钮样式：1. 用 bg-{color}-{shade} 设置背景色，如 bg-blue-500 为蓝色按钮；2. 用 px/py/text 类控制大小，如 px-4 py-2 text-base 为默认尺寸；3. 添加 hover:bg、active:bg 和 focus:ring 实现交互效果，结合 rounded 类调整圆角，无需编写 CSS 即可构建美观按钮。
在使用 TailwindCSS 时，无需手动编写 CSS 即可快速调整按钮的大小和颜色。Tailwind 提供了丰富的实用类（utility classes），通过组合这些类，可以高效地控制按钮样式。
调整按钮颜色
Tailwind 的颜色系统基于调色板，支持多种默认颜色，如 blue、green、red、gray 等。你可以使用 bg-{color}-{shade} 类来设置背景色。
常见用法：
-
bg-blue-500：标准蓝色按钮 -
bg-green-600：成功类按钮（如“保存”） -
bg-red-500：危险操作按钮（如“删除”） -
bg-gray-400：禁用状态或次要按钮
配合文字颜色类如 text-white 或 text-gray-700，可以让文本更清晰。
立即学习“前端免费学习笔记（深入）”；
控制按钮大小
Tailwind 没有预设的“btn-lg”这类类名，但你可以通过调整内边距（padding）和字体大小快速实现不同尺寸。
常用组合：
- 小号按钮：
px-2 py-1 text-sm - 默认按钮：
px-4 py-2 text-base - 大号按钮：
px-6 py-3 text-lg
结合圆角类如 rounded、rounded-md 或 rounded-lg，还能让按钮更具设计感。
添加悬停与交互效果
使用 hover: 前缀可以轻松定义鼠标悬停时的样式变化。
-
hover:bg-blue-600：悬停加深背景色 -
active:bg-blue-700：点击时进一步变暗 -
focus:outline-none focus:ring-2 focus:ring-blue-300：增强焦点可访问性
这些类让按钮具备良好的用户反馈，提升整体体验。
基本上就这些。通过组合 Tailwind 内置的背景、文字、间距和状态类，你可以快速构建出各种风格统一的按钮，无需离开 html 写一行 CSS。