Tailfind 能否將 Bootstrap 4 和 Bootstrap 5 轉成 Tailwind？

可以。選擇 Bootstrap 4 或 Bootstrap 5 並貼上標記，Tailfind 會在匯出 Tailwind CSS 之前載入相符的 Bootstrap CSS。

我可以將 Bootstrap 來源與 Tailwind 結果進行比較嗎？

可以。此轉換器會顯示來源預覽和產生的 Tailwind 預覽，因此可以在複製輸出之前檢查移轉工作。

輸出是移轉和重建工作的可讀 Tailwind 起點。在交付正式環境 UI 之前，請在你自己的設計系統中檢查。

貼上 Bootstrap 4 或 5 標記、比較預覽，並匯出 Tailwind CSS 用於移轉與重建工作。

Bootstrap

沒有來源預覽

Bootstrap HTML 有效時會顯示來源預覽。

Tailwind v4

還沒有輸出

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

無 Tailwind 預覽

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

像素級精準的 Tailwind 轉換器

Bootstrap 轉 Tailwind 轉換器可協助將 Bootstrap 4 和 Bootstrap 5 標記搬到 Tailwind 專案，不必手動重寫每個元件類別。

Tailfind 載入選定的 Bootstrap 版本，預覽來源元件，並匯出帶 Tailwind 類別的一般 HTML，用於卡片、按鈕、徽章、表單、格線、間距和排版。

當你想要一個可以在自己的設計系統中改進的可讀起點時，可以將其用於 Bootstrap 移轉工作、Tailwind 重建或快速元件轉換。

Tailfind 能否將 Bootstrap 4 和 Bootstrap 5 轉成 Tailwind？: 可以。選擇 Bootstrap 4 或 Bootstrap 5 並貼上標記，Tailfind 會在匯出 Tailwind CSS 之前載入相符的 Bootstrap CSS。
我可以將 Bootstrap 來源與 Tailwind 結果進行比較嗎？: 可以。此轉換器會顯示來源預覽和產生的 Tailwind 預覽，因此可以在複製輸出之前檢查移轉工作。
Bootstrap 輸出是否可直接用於正式環境？: 輸出是移轉和重建工作的可讀 Tailwind 起點。在交付正式環境 UI 之前，請在你自己的設計系統中檢查。

跳過手動轉換

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