Tailfind 能否将 Bootstrap 4 和 Bootstrap 5 转换为 Tailwind？

是的。选择 Bootstrap 4 或 Bootstrap 5，粘贴标记，Tailfind 在导出 Tailwind CSS 之前加载匹配的 Bootstrap CSS。

我可以将 Bootstrap 源与 Tailwind 结果进行比较吗？

是的。该转换器显示源预览和生成的 Tailwind 预览，因此可以在复制输出之前检查迁移工作。

输出是迁移和重建工作的可读 Tailwind 起点。在交付生产 UI 之前，请在您自己的设计系统中对其进行审查。

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

Bootstrap

无源码预览

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

Tailwind v4

还没有输出

生成的 Tailwind 输出自动出现在此处。

无 Tailwind 预览

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

像素完美的 Tailwind 转换器

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

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

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

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

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

跳过手动转换

Tailfind 将转换器带到您的浏览器中，因此您可以直接从您正在查看的页面捕获生产 UI。