會轉換哪些東西?

常見的 Tailwind 工具類 — spacing、色彩、字體、flex 與 position,以及任意 [value] 與 [prop:value] 形式;變體尚未支援。

為什麼要選擇器?

輸出是單一 CSS 規則,提前選好選擇器就能直接貼到樣式表中,不必再重新命名或包裝。

響應式或 hover 變體有支援嗎?

尚未支援,需要 media query 或偽類包裝。貼上前請去掉 md:、hover:、dark: 等前綴;基礎工具類可乾淨往返。

它知道我的 Tailwind 主題嗎?

不知道。會使用預設刻度;若你自訂了 spacing 或顏色,輸出中會以 arbitrary 形式落地,CSS 依然可用。

能用反向工具再轉一次嗎?

可以。針對基礎工具類,往返完全一致;arbitrary 值會被保留,不被支援的宣告維持為 arbitrary 類別。

我的輸入會被上傳嗎?

不會。整個轉換過程都在此分頁中完成;Toova 看不到你的類別清單、選擇器或輸出。

Tailwind 轉 CSS — 工具類組成單一規則

Tailwind 工具類 → CSS

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

貼上 Tailwind 工具類清單與一個選擇器,Toova 會建出對應的 CSS 規則。p-[13px] 與 [grid-template-columns:1fr_2fr] 之類的 arbitrary 類別會被展開為原始宣告,可以直接放進樣式表。

什麼時候適合反向轉換

有時你用 Tailwind 做原型,但必須輸出 CSS — 例如行銷信件、第三方 widget、或交付給未載入 Tailwind 的 CMS。轉換器把工具類清單合併成單一規則,並使用你指定的選擇器,直接貼上即可,無需重新命名或清理 playground markup。

arbitrary 值如何回流

Tailwind 的 arbitrary 類別本身就帶值:p-[13px] 代表 padding: 13px、[grid-template-columns:1fr_2fr] 代表 grid-template-columns: 1fr 2fr。轉換器以原樣展開兩種寫法,你透過 JIT 編寫的任何自訂值都能無需額外對應表地保留。

限制與往返

響應式(md:flex)、狀態(hover:bg-black)與深色模式(dark:text-white)等變體需要 media query 或偽類包裝,轉換器尚未支援,貼上前請先去除。主題 token(text-brand)會落回 Tailwind 預設刻度;若你自訂了 theme,可能出現 arbitrary fallback。基礎工具類可與 CSS-to-Tailwind 工具乾淨往返。

常見問題

會轉換哪些東西?: 常見的 Tailwind 工具類 — spacing、色彩、字體、flex 與 position,以及任意 [value] 與 [prop:value] 形式;變體尚未支援。
為什麼要選擇器?: 輸出是單一 CSS 規則,提前選好選擇器就能直接貼到樣式表中,不必再重新命名或包裝。
響應式或 hover 變體有支援嗎?: 尚未支援,需要 media query 或偽類包裝。貼上前請去掉 md:、hover:、dark: 等前綴;基礎工具類可乾淨往返。
它知道我的 Tailwind 主題嗎?: 不知道。會使用預設刻度;若你自訂了 spacing 或顏色,輸出中會以 arbitrary 形式落地,CSS 依然可用。
能用反向工具再轉一次嗎?: 可以。針對基礎工具類,往返完全一致;arbitrary 值會被保留,不被支援的宣告維持為 arbitrary 類別。
我的輸入會被上傳嗎?: 不會。整個轉換過程都在此分頁中完成;Toova 看不到你的類別清單、選擇器或輸出。