Tailwind 線上演練場
用 Tailwind CSS v4 工具類編寫 HTML，瀏覽器內即時編譯預覽。
Tailwind 線上演練場是什麼？
它是一個免費的瀏覽器內編輯器：用 Tailwind CSS v4 工具類編寫 HTML，並在即時預覽中查看編譯結果。官方 Tailwind v4 瀏覽器編譯器已打包進頁面，無須安裝任何東西。
我的程式碼會被上傳嗎？
不會。編譯完全在瀏覽器內完成，Tailwind 引擎為本機打包副本。HTML 不會離開頁面，草稿只保存在瀏覽器的 localStorage 中。
使用的是哪個 Tailwind 版本？
使用最新的 Tailwind CSS v4，透過官方 @tailwindcss/browser 編譯器執行。所有核心工具類、變體和預設主題都可用，也支援方括號任意值。
即時預覽是如何運作的？
你的 HTML 會被注入沙盒 iframe 並連同編譯器一起載入。每次編輯後暫停 500 毫秒再重新編譯工具類，輸入流暢的同時預覽保持最新。
如何測試暗黑模式樣式？
勾選「暗黑預覽」開關。它會為預覽文件加入 dark 類，編譯器會把 dark: 變體對應到該類，dark:bg-slate-900 之類的工具類會立即生效。
能看到 Tailwind 產生的 CSS 嗎？
可以。編輯器下方的「編譯後 CSS」面板顯示編譯器為你的標記產生的確切樣式表，「複製 CSS」按鈕可將其複製到剪貼簿。
下載的 HTML 包含什麼？
「下載 HTML」按鈕會產生獨立檔案：包含你的標記以及內嵌在 head 中的編譯後 CSS，無須任何 CDN 連結或連網即可離線正確呈現。
有起始範本嗎？
有。範本選擇器提供 Hero 首屏、響應式卡片網格與三段定價表，全部使用目前的 v4 工具類編寫，另附一個極簡空白起點。
如何使用Tailwind 線上演練場
這個演練場在你自己的電腦上執行官方 Tailwind CSS v4 瀏覽器編譯器。左側用工具類別撰寫普通 HTML，編譯器在沙盒預覽 iframe 中產生對應的 CSS，下方面板顯示產出的確切樣式表。全程不上傳：編譯器、你的標記與草稿都留在瀏覽器裡。
- 在「範本」選擇器中選一個起點：首屏 Hero、卡片網格、定價表或空白；你編輯的內容也會在下次造訪時自動還原。
- 在左側編輯器中修改 HTML。按 Tab 會插入兩個空格，停止輸入約 500 毫秒後預覽會自動重新編譯。
- 用「自動換行」開關控制換行方式，用「字號」選擇器調整編輯器文字大小。
- 開啟「暗黑預覽」開關，會為預覽文件加入 dark 類別；dark:bg-slate-900 之類的工具類別立即生效。
- 在「編譯後 CSS」面板查看產生的規則，需要時用「複製 CSS」一鍵複製。
- 用「複製 HTML」取得原始標記，或用「下載 HTML」匯出內嵌了編譯後 CSS 的獨立檔案，可離線直接開啟。
至少編譯一次後，下載的檔案才帶有真實樣式，匯出前先讓預覽渲染一下。想精簡產生的 CSS，就從範本中刪掉不需要的元素——面板始終精確反映目前標記所需的內容。
相關工具
- 程式碼演練場 線上 HTML、CSS 和 JavaScript 演練場，帶即時預覽、行號編輯器和主控台輸出。即改即測，結果可下載為單一 HTML 檔案——完全在瀏覽器中執行。
- CSS Grid產生器 免費線上視覺化CSS Grid產生器，即時預覽。互動式建立響應式網格佈局，一鍵匯出可用的CSS程式碼。
- Chmod 計算器 免費線上chmod計算器，透過核取方塊視覺化Linux檔案權限並計算chmod值。即時轉換數字(755, 644)和符號(rwxr-xr-x)表示法，支援setuid、setgid、sticky bit等特殊權限。
- ASCII碼表 完整的ASCII字元編碼參考表，包含十進位、十六進位、八進位、二進位編碼、HTML實體和字元描述。支援即時搜尋和篩選。
- HTTP 請求測試 在瀏覽器中直接測試 REST API。發送 GET、POST、PUT、DELETE 請求，自訂請求標頭、請求體和查詢參數，即時查看回應狀態、標頭和 JSON 內容。
- .htaccess產生器 產生Apache .htaccess規則，包括重新導向、重寫、安全標頭、快取、壓縮等。
- Robots.txt產生器 免費線上robots.txt產生器。建立和自訂robots.txt檔案，控制搜尋引擎爬取，管理爬蟲存取，透過視覺化編輯器優化網站SEO。
- 網站地圖產生器 免費線上XML網站地圖產生器。新增URL、設定優先級和更新頻率，在瀏覽器中即時建立SEO友好的網站地圖。