安裝
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://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/npm/@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>