Tailwind CSS

Tailwind CSS 把常见样式拆成一个个 utility class。开发者把它们直接写进 className，就能组合出按钮、卡片和布局，并在修改 class 后立即看到界面变化。

• px-4、rounded-lg 这类 utility 分别表达间距和圆角等小职责。
• 多个 utility 放在同一个 className 中，组合出一个完整的界面样式。
• 改动 class 就能验证外观，不需要先去不同文件里寻找一条很长的选择器。

Tailwind CSS 提供的是可组合的样式 utility。它不会替你决定完整组件的业务行为，也不会代替 JavaScript 处理点击、请求和数据。

• 看到 className 里有很多短样式词，想到 Tailwind 的 utility 组合。
• 看到现成的复杂组件和交互逻辑，看组件库或 JavaScript，而不是把所有职责都交给 CSS。

它的价值是让样式职责贴近使用位置，并保持小 utility 可以重复组合；这不等于页面不需要设计结构和语义。

拆开一个 Tailwind 按钮，可以看到 utility 轨道、className 配方和最终界面这三个互相对应的部分。

• UTILITY 是 px-4、rounded-lg 等小规则，每个词只承担一个清楚的样式职责。
• CLASS RECIPE 是写在 className 里的组合，它把多个小规则放到同一个界面对象上。
• UI 是用户实际看到的按钮，应该能从它的间距、圆角、颜色和阴影读回前面的组合。

请用清楚的 Tailwind utility class 组合出按钮样式，保持 className 可读；修改 class 后在真实页面检查间距、颜色、圆角和窄屏换行，不要把样式偷偷移到不可追踪的重复 CSS 中。