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