Tailfind可以将HTML和CSS转换为Tailwind CSS吗？

可以。粘贴 HTML 片段及其 CSS，Tailfind 会先渲染结果，再导出带 Tailwind class 的常规 HTML。

转换器是否保留自定义 CSS 值？

当值匹配 framework scale 时，Tailfind 会优先使用默认 Tailwind class，并用明确的 arbitrary value 表示自定义颜色、间距、阴影和尺寸。

小型、独立的 UI 片段效果最好，包括卡片、表单、部分、原型和遗留片段，其中可以将相关 CSS 与标记一起粘贴。

粘贴 HTML 和 CSS，预览渲染的片段，然后为 Tailwind Play 或您的代码库导出干净的 Tailwind CSS。

无源码预览

输入有效时会出现源预览。

Tailwind v4

还没有输出

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

无 Tailwind 预览

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

像素完美的 Tailwind 转换器

一起读取 HTML 和 CSS: 生成 Tailwind class 之前，会根据实际 markup 解析 selector、class、inline style 和嵌套规则。
保留有意义的标记: 语义结构、属性、文本、链接和表单元素会保留在导出的 HTML 中，样式则转移到 Tailwind class。
支持预览的转换: 源预览和生成的预览可以更轻松地将原始片段与 Tailwind 输出进行比较。
嵌套元素覆盖: 子元素、SVG、图标和组合的 UI 片段将随周围的样式上下文进行转换。
对于组件重建很有用: 将复制的 UI 片段、原型和静态片段迁移到 Tailwind 组件中，而不会丢失原始 HTML 形状。
发送到 Tailwind Play: 生成的Tailwind CSS可以直接在Tailwind Play中打开，以便快速编辑、实验和共享。

HTML/CSS 到 Tailwind 转换器专为粘贴的 UI 片段、登陆页面部分、原型和遗留模板而构建，其中样式在选择器、类和内联声明之间进行拆分。

Tailfind 使用 CSS 渲染标记，读取计算结果，并导出 Tailwind 就绪的 HTML，以便您可以将相同的结构移至 Tailwind 项目中，而无需手动翻译每个声明。

当你需要快速完成 HTML 到 Tailwind CSS 的转换、把结果更干净地发送到 Tailwind Play，或为 Angular、React、Vue、Svelte、普通 HTML 中的静态组件重建提供起点时，可以使用它。

Tailfind可以将HTML和CSS转换为Tailwind CSS吗？: 可以。粘贴 HTML 片段及其 CSS，Tailfind 会先渲染结果，再导出带 Tailwind class 的常规 HTML。
转换器是否保留自定义 CSS 值？: 当值匹配 framework scale 时，Tailfind 会优先使用默认 Tailwind class，并用明确的 arbitrary value 表示自定义颜色、间距、阴影和尺寸。
哪种 HTML 效果最好？: 小型、独立的 UI 片段效果最好，包括卡片、表单、部分、原型和遗留片段，其中可以将相关 CSS 与标记一起粘贴。

跳过手动转换

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