若要充分利用 Tailwind，您需要一個建置步驟。這是唯一能夠自訂您的 tailwind.config.js 檔案、使用 @apply 提取組件或包含 外掛 的方式。
如果您已經購買此框架，這不是問題，但如果您只是第一次嘗試，就會有很多摩擦。您必須設定支援 PostCSS 的本機開發環境，或堅持使用靜態 CDN 建置，這意味著您會錯過許多很棒的功能。
因此，今天我們很高興發布第一個版本的 Tailwind Play，這是一個適用於 Tailwind CSS 的進階線上遊樂場，讓您可以直接在瀏覽器中使用 Tailwind 的所有建置時功能。
它支援所有 Tailwind 最酷的功能，以及許多在 Tailwind Play 中比在您的編輯器中更好的功能，例如
- 自訂您的 Tailwind 主題
- 啟用特殊變體，例如
group-hover或focus-within - 在您的 CSS 中使用自訂指令，例如
@apply、@variants和@responsive - 新增外掛，例如
@tailwindcss/typography - 智慧程式碼完成和檢查
- 響應式設計模式
- 一鍵分享
程式碼完成甚至會即時更新呈現的預覽，這在瀏覽器中建立了一個令人難以置信的設計工作流程 — 例如，只需使用方向鍵瀏覽不同的填充工具，即可找到完美的值，而無需儲存檔案甚至按下 Enter！
我們的響應式設計模式可讓您在設計時微調視窗，就像您在 Chrome DevTools 中一樣。您甚至可以將視窗拖曳超出可用空間，預覽區域會自動縮小，讓您即使在空間有限的情況下也能為更大的螢幕設計。
一鍵分享確實就是如此簡單 — 您甚至不需要建立帳戶。按一下「分享」，您就會立即獲得一個連結，可以分享您正在處理的內容的快照。
請在 play.tailwindcss.com 上查看，並告訴我們您的想法！
想要討論這篇文章嗎？在 GitHub 上討論 →