Tailfind 能否將 HTML 和 CSS 轉換成 Tailwind CSS？

可以。貼上 HTML 片段及其 CSS，Tailfind 會先渲染結果，再匯出帶 Tailwind 類別的一般 HTML。

轉換器是否保留自訂 CSS 值？

當值符合框架尺度時，Tailfind 會優先使用預設 Tailwind 類別，並用明確的任意值表示自訂顏色、間距、陰影和尺寸。

小型、自成一體的 UI 片段效果最好，包括卡片、表單、區段、原型和舊版片段，只要能把相關 CSS 與標記一起貼上即可。

貼上 HTML 和 CSS，預覽渲染片段，並為 Tailwind Play 或你的程式碼庫匯出乾淨的 Tailwind CSS。

沒有來源預覽

輸入有效時會顯示來源預覽。

Tailwind v4

還沒有輸出

產生的 Tailwind 輸出會自動顯示在這裡。

無 Tailwind 預覽

轉換後，產生的 Tailwind 預覽會顯示在這裡。

像素級精準的 Tailwind 轉換器

HTML/CSS 轉 Tailwind 轉換器適用於貼上的 UI 片段、landing page 區塊、原型和舊版範本，這些內容的樣式通常分散在選擇器、類別和行內宣告中。

Tailfind 會用 CSS 渲染標記、讀取計算結果，並匯出 Tailwind CSS，讓你不必手動轉換每個宣告也能把相同結構搬到 Tailwind 專案。

當你需要快速將 HTML 轉成 Tailwind CSS、更乾淨地交接到 Tailwind Play，或在 Angular、React、Vue、Svelte 或一般 HTML 中重建靜態元件時，可以用它作為起點。

Tailfind 能否將 HTML 和 CSS 轉換成 Tailwind CSS？: 可以。貼上 HTML 片段及其 CSS，Tailfind 會先渲染結果，再匯出帶 Tailwind 類別的一般 HTML。
轉換器是否保留自訂 CSS 值？: 當值符合框架尺度時，Tailfind 會優先使用預設 Tailwind 類別，並用明確的任意值表示自訂顏色、間距、陰影和尺寸。
什麼樣的 HTML 效果最好？: 小型、自成一體的 UI 片段效果最好，包括卡片、表單、區段、原型和舊版片段，只要能把相關 CSS 與標記一起貼上即可。

跳過手動轉換

Tailfind 會把轉換器帶到你的瀏覽器中，讓你可以直接從正在查看的頁面擷取正式環境 UI。