Tailwind CSS生成器

在线免费Tailwind CSS可视化生成器，调颜色、圆角、阴影、布局实时预览并生成标准类名代码，浏览器本地运行。

示例卡片

这是使用当前配置的示例文本

主按钮

上方预览区即实时效果

颜色

背景色

卡片色

卡片透明度100%

圆角与阴影

圆角12px

阴影

布局

最大宽度

水平居中mx-auto

弹性布局flex

Tailwind HTML

<div class="p-6 max-w-md mx-auto" style="background:#f1f5f9">
  <div class="bg-white rounded-xl shadow-md p-4">
    <h3 class="font-bold">标题</h3>
    <p class="text-gray-600 mt-2">描述文本</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg">按钮</button>
  </div>
</div>

💡 生成的类名为标准 Tailwind CSS 语法，可直接粘贴到项目使用

💡 卡片透明度对应 bg-white/透明度写法，适合毛玻璃叠层

常见问题

生成的类名能用吗？

生成的是标准 Tailwind 语法类名（如 rounded-xl、shadow-md、max-w-md），复制到任何 Tailwind 项目都能直接生效。

透明度类名是什么格式？

卡片透明度对应 Tailwind 的 bg-white/75 这类写法，毛玻璃叠层常用。

需要登录或付费吗？

不需要，打开即用，全部本地运行。