CSS 轉 Tailwind 工具
貼上舊 CSS，取得 utility-first 的起點，方便遷移、整理或快速改寫成 Tailwind。
轉換結果會顯示在這裡。
為什麼使用 CSS 轉 Tailwind 工具？
加速遷移
把既有 CSS 較快搬進 Tailwind 流程，將已知 declarations 轉成 utility class 候選，而不是每一行手動翻。
支援 arbitrary value
當標準 utility class 不存在時，使用 Tailwind arbitrary syntax 保留不常見的值。
以程式碼審閱為前提重構
把輸出當作遷移草稿，再把重複值整理成 token、component、variant 或可重用 class pattern。
常見可轉換 properties
displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity
:hover、::before 或 media queries 這類複雜 selectors，轉換後仍可能需要手動整理。
常見問題
轉換結果可以直接當正式 class 嗎？
不建議。自動轉換適合作為起點。複雜 selector、responsive rules、pseudo-elements、cascade 行為和 component 語意仍需要人工審閱。
可以貼沒有 selector 的 raw declarations 嗎？
可以。工具會暫時包住單獨 declaration，讓轉換器仍能處理。
重複的 arbitrary values 該怎麼處理？
如果某個值在 UI 中重複出現，建議變成 theme token、component class 或 design-system primitive，不要留下很多一次性的 arbitrary utilities。
這能轉 media queries 和 hover states 嗎？
部分簡單 declarations 可被轉換，但 responsive variants、hover states、pseudo-elements 和 nested selectors 通常仍需要手動清理。