Bootstrap 转 Tailwind 转换器

粘贴 Bootstrap 4 或 5 标记，比较预览，然后导出 Tailwind CSS 以进行迁移和重建工作。

Bootstrap

无源预览

当 Bootstrap HTML 有效时，会出现源预览。

Tailwind v4

还没有输出

生成的 Tailwind 输出会自动显示在此处。

无 Tailwind 预览

转换后生成的 Tailwind 预览显示在此处。

像素级精准的 Tailwind 转换器

将 Bootstrap 组件转换为干净的 Tailwind CSS

版本感知转换
选择 Bootstrap 4 或 5，以便 Tailfind 在生成 Tailwind 输出之前应用正确的源框架假设。
组件类翻译
卡片、徽章、提示、按钮、表单、间距工具类和文本工具类会转换为简洁的 Tailwind CSS。
预览支持的清理
源预览和生成的预览有助于在复制之前比较 Bootstrap 输入与 Tailwind 输出。
网格和间距迁移
Bootstrap 布局片段和间距工具会变成可读的 Tailwind 类，更易于调整。
可直接用于 SPA 的输出
结果是带 Tailwind 类的常规 HTML，可迁移到 Angular 模板、React 组件和其他前端堆栈。
发送到 Tailwind Play
生成的 Tailwind CSS 可以直接在 Tailwind Play 中打开，方便快速编辑、实验和共享。

Bootstrap 迁移指南

将 Bootstrap 组件移至 Tailwind 项目中

Bootstrap 转 Tailwind 转换器有助于将 Bootstrap 4 和 Bootstrap 5 标记移动到 Tailwind 项目，而无需手动重写每个组件类。

Tailfind 会加载选定的 Bootstrap 版本，预览源组件，并导出带 Tailwind 类的常规 HTML，用于卡片、按钮、徽章、表单、网格、间距和排版。

当你想要一个可以在自己的设计系统中改进的可读起点时，可将其用于 Bootstrap 迁移工作、Tailwind 重建或快速组件转换。

Tailfind 能否将 Bootstrap 4 和 Bootstrap 5 转成 Tailwind？
可以。选择 Bootstrap 4 或 Bootstrap 5 并粘贴标记，Tailfind 会在导出 Tailwind CSS 之前加载匹配的 Bootstrap CSS。
我可以将 Bootstrap 源与 Tailwind 结果进行比较吗？
可以。该转换器会显示源预览和生成的 Tailwind 预览，因此可以在复制输出之前检查迁移工作。
Bootstrap 输出是否可直接用于生产？
输出是迁移和重建工作的可读 Tailwind 起点。在交付生产 UI 之前，请在你自己的设计系统中检查。

跳过手动转换

转换实时页面
成 Tailwind CSS

Tailfind 会把转换器带到你的浏览器中，让你可以直接从正在查看的页面捕获生产 UI。

更多信息 下载
应用截图