安裝
Tailwind CSS 的運作方式是掃描所有 HTML 檔案、JavaScript 元件和任何其他範本中的類別名稱，產生對應的樣式，然後將它們寫入靜態 CSS 檔案。
它快速、靈活且可靠 — 零執行階段。
使用 Play CDN 直接在瀏覽器中嘗試 Tailwind，無需任何建置步驟。 Play CDN 僅供開發用途，不適用於生產環境。
將 Play CDN 腳本標籤新增到 HTML 檔案的 <head> 中，然後開始使用 Tailwind 的工具類別來設計內容樣式。
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>使用 type="text/tailwindcss" 來新增支援所有 Tailwind CSS 功能的自訂 CSS。
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>