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 輸出進行比較。
嵌套元素覆蓋: 子元素、SVG、圖示和組合 UI 片段將隨周圍的樣式上下文進行轉換。
對於組件重建很有用: 將複製的 UI 片段、原型和靜態片段遷移到 Tailwind 元件中，而不會遺失原始 HTML 形狀。
交接到 Tailwind Play: 產生的 Tailwind CSS 可以直接在 Tailwind Play 中開啟，方便快速編輯、實驗和分享。

HTML/CSS 到 Tailwind 轉換器適用於貼上的 UI 片段、landing page 區塊、prototype 和 legacy template，這些內容的樣式通常分散在 selector、class 和 inline declaration 中。

Tailfind 會用 CSS 渲染 markup、讀取 computed 結果，並匯出適合 Tailwind 的 HTML，讓你不必手動轉換每個 declaration 也能把相同結構搬到 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。