哪些 CSS 屬性會被辨識?

padding 與 margin 的 spacing 刻度、文字與背景顏色、display、flex 對齊、字體大小與粗細、border-radius、width 與 height、position 以及 gap。其他屬性會落到 [prop:value] 的 arbitrary 類別。

若值不在標準刻度上呢?

轉換器會輸出像 p-[13px] 或 bg-[#3b82f6] 的 arbitrary 寫法。JIT 會編譯,結果仍是合法 Tailwind,不需手動修改。

能處理自訂 CSS 變數嗎?

可以。含有 var(--token) 的值會以方括號保留;此 token 仍需要在 tailwind.config 的 theme 或 :root 的 custom property 中宣告。

轉換是無損的嗎?

對常見模式而言是無損的。動畫、漸層與較罕見的選擇器會被保留為 arbitrary 類別 — 它們存留下來,但你可能會想保留原本的 CSS。

能與 Tailwind-to-CSS 工具往返嗎?

大部分情況可以。簡單 utility 完全等同往返;arbitrary 值得以保留,不過不被支援的宣告往回時仍會保留 arbitrary 形式。

會上傳任何內容嗎?

不會。整個轉換流程都在此瀏覽器分頁中執行,你的樣式表內容不會離開本頁。

CSS 轉 Tailwind — 宣告對應工具類

CSS → Tailwind 工具類

注重隱私的設計 — 完全在您的瀏覽器中執行

在左側貼上 CSS 宣告,右側即可複製對應的 Tailwind 工具類。轉換器把 spacing、色彩、字體與版面的標準刻度對應到原生工具類,遇到 Tailwind 不認識的值則 fallback 為方括號寫法。

可對應的屬性

轉換器涵蓋日常 CSS 範圍:padding 與 margin 的 spacing、字體大小與粗細、色彩(text 與 bg)、display、flex 方向與對齊、border-radius、width 與 height、position 與 gap。每個都會落到 Tailwind 的標準縮寫(像 p-4、text-lg、justify-between),輸出讀起來就像手寫的 Tailwind。

為什麼 arbitrary 寫法重要

實際專案常會用到沒有 shortcut 的值:13px 的自訂字體大小、品牌專屬的 hex 顏色、1.7rem 的 gap。當轉換器遇到這些時會輸出 Tailwind 的 arbitrary 寫法,例如 text-[13px] 或 bg-[#3b82f6]。產生出來的類別仍是合法 Tailwind,JIT 也照常處理,並可以乾淨地經由 Tailwind-to-CSS 工具回到原樣。

什麼情況會被原樣帶過

複雜選擇器、動畫、漸層與 keyframes 故意不處理 — 它們屬於 Tailwind 透過外掛或 @apply 才能涵蓋的層,啟用 heuristic mapping 反而會誤導正確性。這些宣告會原封不動地出現在 [prop:value] arbitrary 類別裡,讓你能無損地檢視。

常見問題

哪些 CSS 屬性會被辨識?: padding 與 margin 的 spacing 刻度、文字與背景顏色、display、flex 對齊、字體大小與粗細、border-radius、width 與 height、position 以及 gap。其他屬性會落到 [prop:value] 的 arbitrary 類別。
若值不在標準刻度上呢?: 轉換器會輸出像 p-[13px] 或 bg-[#3b82f6] 的 arbitrary 寫法。JIT 會編譯,結果仍是合法 Tailwind,不需手動修改。
能處理自訂 CSS 變數嗎?: 可以。含有 var(--token) 的值會以方括號保留;此 token 仍需要在 tailwind.config 的 theme 或 :root 的 custom property 中宣告。
轉換是無損的嗎?: 對常見模式而言是無損的。動畫、漸層與較罕見的選擇器會被保留為 arbitrary 類別 — 它們存留下來,但你可能會想保留原本的 CSS。
能與 Tailwind-to-CSS 工具往返嗎?: 大部分情況可以。簡單 utility 完全等同往返;arbitrary 值得以保留,不過不被支援的宣告往回時仍會保留 arbitrary 形式。
會上傳任何內容嗎?: 不會。整個轉換流程都在此瀏覽器分頁中執行,你的樣式表內容不會離開本頁。