g3n-data
贊助EN
← 全部工具

Tailwind 轉 CSS

將常見 utilities 與支援的 variants 轉為 scoped CSS，獨立檢查未支援 classes。

tailwind-to-css本機處理

正在啟用本機工具…

Tailwind v4 工作台

預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。

上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。

轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。

參考資料核對: · 主題 · 響應式設計 · v4 遷移指南 · 色彩

預覽與輸出

結果已在本機更新。套用至專案前請核對。

只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。

對照／參考 (7)
目前設定的 utility 對照與數值
ClassCSS狀態
flexdisplay: flex已對照
items-centeralign-items: center已對照
gap-4gap: 1rem已對照
p-4padding: 1rem已對照
rounded-lgborder-radius: 0.5rem已對照
bg-slate-100background-color: oklch(96.8% 0.007 247.896)已對照
text-slate-900color: oklch(20.8% 0.042 265.755)已對照
Classes

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

flex items-center gap-4 p-4 rounded-lg bg-slate-100 text-slate-900
展開可選取的完整文字
flex items-center gap-4 p-4 rounded-lg bg-slate-100 text-slate-900

HTML

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

<div><p>只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。</p></div>
展開可選取的完整文字
<div><p>只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。</p></div>

CSS

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.gap-4 {
  gap: 1rem;
}

.p-4 {
  padding: 1rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.bg-slate-100 {
  background-color: oklch(96.8% 0.007 247.896);
}

.text-slate-900 {
  color: oklch(20.8% 0.042 265.755);
}
展開可選取的完整文字
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.gap-4 {
  gap: 1rem;
}

.p-4 {
  padding: 1rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.bg-slate-100 {
  background-color: oklch(96.8% 0.007 247.896);
}

.text-slate-900 {
  color: oklch(20.8% 0.042 265.755);
}

如何使用這個工具

調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。

不適合用在什麼情況

不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。