Tailwind 游乐场
实时测试和预览 Tailwind CSS 类。
设置
配置元素类型和内容
预设示例
快速应用常用的样式组合
Button
Card
Badge
Alert
Input
预览
查看实时样式结果
你好，Tailwind！
生成的 HTML
使用当前设置生成的 HTML 代码
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">你好，Tailwind！</div>
💡 使用技巧
常用类：
- •
hover:- 悬停状态样式 - •
focus:- 焦点状态样式 - •
active:- 活动状态样式 - •
transition-colors- 颜色过渡效果
响应式类：
- •
sm:- 640px 及以上 - •
md:- 768px 及以上 - •
lg:- 1024px 及以上 - •
xl:- 1280px 及以上