Tailwind Class 衝突偵錯器
檢查 utility 屬性重疊，並取得保守的清單順序清理建議。
tailwind-class-conflicts本機處理
正在啟用本機工具…
Tailwind v4 工作台
預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。
上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。
轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。
預覽與輸出
結果已在本機更新。套用至專案前請核對。
只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。
檢查提示
- 清理假設同 variant、同重要性的後方項目覆蓋前項屬性。實際 Tailwind cascade 依產生的 CSS 順序；此排序不是官方 Prettier 順序。未知 classes 保留。
- p-4 ↔ px-2: padding-right, padding-left
- p-4 ↔ p-6: padding-top, padding-right, padding-bottom, padding-left
- px-2 ↔ p-6: padding-left, padding-right
- text-sm ↔ text-lg: font-size, line-height
- md:p-2 ↔ md:p-8: padding-top, padding-right, padding-bottom, padding-left
對照／參考 (7)
| Class | CSS | 狀態 |
|---|---|---|
p-4 | padding: 1rem | 已對照 |
px-2 | padding-left: 0.5rem; padding-right: 0.5rem | 已對照 |
p-6 | padding: 1.5rem | 已對照 |
text-sm | font-size: 0.875rem; line-height: 1.25rem | 已對照 |
text-lg | font-size: 1.125rem; line-height: 1.75rem | 已對照 |
md:p-2 | padding: 0.5rem | 已對照 |
md:p-8 | padding: 2rem | 已對照 |
Classes
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
p-6 text-lg md:p-8
展開可選取的完整文字
p-6 text-lg md:p-8
HTML
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
<div><p>只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。</p></div>
展開可選取的完整文字
<div><p>只預覽支援的基本 utilities；modifiers 於匯出 CSS 顯示。</p></div>
CSS
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
.p-4 {
padding: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.p-6 {
padding: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
@media (width >= 48rem) {
.md\3a p-2 {
padding: 0.5rem;
}
}
@media (width >= 48rem) {
.md\3a p-8 {
padding: 2rem;
}
}展開可選取的完整文字
.p-4 {
padding: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.p-6 {
padding: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
@media (width >= 48rem) {
.md\3a p-2 {
padding: 0.5rem;
}
}
@media (width >= 48rem) {
.md\3a p-8 {
padding: 2rem;
}
}如何使用這個工具
調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。
不適合用在什麼情況
不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。