Tailwind Grid 建構器
調整 base、sm、md、lg 欄數、間距與個別項目跨欄，模擬各斷點。
tailwind-grid-builder本機處理
正在啟用本機工具…
Tailwind v4 工作台
預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。
上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。
轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。
預覽與輸出
結果已在本機更新。套用至專案前請核對。
項目 1
項目 2
項目 3
項目 4
項目 5
項目 6
Classes
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4
展開可選取的完整文字
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4
HTML
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 1</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 2</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-2">項目 3</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 4</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 5</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 6</div></div>
展開可選取的完整文字
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 1</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 2</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-2">項目 3</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 4</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 5</div><div class="rounded-md bg-slate-100 p-4 text-slate-900 col-span-1">項目 6</div></div>
如何使用這個工具
調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。
不適合用在什麼情況
不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。