复制并粘贴到您的框架中
转换任何实时页面
转换为普通 Tailwind CSS
Google Chrome 扩展可帮助你转换真实页面、捕获需要的片段，并从 Tailwind 就绪的 HTML 继续开发，而不是从头重建整个组件。
为什么使用 Tailfind？
改进您的界面开发流程
Popover 会把操作保留在所选元素旁边
内联弹出窗口使关键操作保持紧密，让您可以更快地优化选择并导出正确的片段。相同的操作可用作键盘快捷键，因此您可以继续移动而无需离开选择流程。
选择确切的片段
导航网页，直到捕获与您实际想要重复使用的边界相匹配。
导出干净的 Tailwind HTML
Tailfind 将选定的片段转换为可读的 Tailwind 就绪标记，您可以进行优化，而不是从头开始重建。
从扩展弹出窗口开始捕获
选择要检查的元素，复制整个页面主体，然后配置扩展以匹配您的工作流程。
AI学习算法
处理复杂的 UI 元素
- 支持任何代码库
- 跨遗留前端、现代组件应用程序和混合生产堆栈工作，无需特定的框架或样式设置。
- 融合了所有风格
- 一起读取编写的类和内联声明，而不是单独处理它们。
- Tailwind 至 Tailwind
- 当源已使用 Tailwind 时，输出将保持 Tailwind 原生且更易于优化。
- 支持SVG
- 内嵌矢量图形保持完整，因此图标、徽标和插图可以在导出时保留下来。
- 消除多余噪音
- 通过避免重复的包装器、重复的声明和低值样式混乱来保持生成的标记的重点。
- 理解混淆的标记
- 适用于类名被压缩、生成或无法作为事实来源的生产页面。
Tailfind 用例
使用浏览器作为事实来源
当真实界面已经存在并且您需要更快的方法将其转换为可编辑的 Tailwind CSS 时，Tailfind 会有所帮助。
- 旧版 UI 重写
- 使用发货的产品作为参考，捕获您需要的确切块，并从真实结构开始重写，而不是屏幕截图和猜测。
- AI 的最佳 UI 输入
- 给 AI 提供干净的 Tailwind 类，而不是粗糙的 markup 或截图，让 AI 生成的代码更接近最终结果。
- 设计是一个代码优先的过程
- 当浏览器是最准确的设计源时，Tailfind 可让您检查实现本身并将其转换为可编辑的 Tailwind 基线。
- 从实时界面进行原型设计
- 从已在浏览器中运行的真实模式开始，然后在 Tailwind Play 或代码库中重新混合导出的 HTML，而无需从空文件开始。
对于使用前端框架的开发人员很有用，例如
节省您的时间
购买前先试用
在您自己的开发任务中使用免费试用版，然后在扩展成为您工作流程的一部分时永久保留该扩展。
终身访问
$24USD
支付一次，长期保留 Tailfind，并获得未来的每次更新。
- 所有试用功能
- 无限份数
- 未来的扩展更新
- AI学习算法
- React 输出支持
14天退款
你需要知道的一切
常见问题
- Tailfind 实际上复制了什么？
- 将选定的页面片段导出为普通的 Tailwind 就绪 HTML，用于学习、原型设计或更快重建 UI。
- 它适用于我的框架吗？
- 可以。输出是包含 Tailwind 类的常规 HTML，因此可以粘贴到 Angular、React、Vue、Svelte 或混合前端中。
- 它会保留复杂的样式吗？
- 它结合了编写的类和内联样式，然后将选定的结果转换为可移植的 Tailwind 标记。
- 我可以在购买前试用一下吗？
- 是的。免费试用版包含有限的副本。终身访问消除了复制限制并包括未来的扩展更新。
- 它可以在任何网站上使用吗？
- 它是为 Chrome 中的可见界面片段构建的，当您可以直接选择元素时效果最佳。
- 我可以复制整个页面而不是一个元素吗？
- 是的。使用“网页”副本进行较大的捕获，或在需要更紧凑的片段时使用元素选择。
Tailfind 已经处理现实世界的案例
并通过 AI 不断改进
密集标记、遗留 CSS 和不寻常的组件对于 Tailfind 来说不是问题。它首先删除重复的部分，因此您可以从真实的结构开始，而不是手动重建布局。
联系支持人员
如果您对购买不满意、发现 Tailfind 存在问题或有疑问，请通过以下方式联系我们： support@tailfind.org