安裝
Tailwind CSS 的運作方式是掃描你所有的 HTML 檔案、JavaScript 元件和其他任何範本中的類別名稱，產生對應的樣式，然後將它們寫入一個靜態 CSS 檔案。
它快速、靈活且可靠——零執行時期開銷。
將 Tailwind CSS 作為 Vite 外掛安裝，是與 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架整合的最順暢方式。
如果你還沒有設定專案，請先建立一個新的 Vite 專案。最常見的方式是使用 Create Vite。
npm create vite@latest my-projectcd my-project透過 npm 安裝 tailwindcss 和 @tailwindcss/vite。
npm install tailwindcss @tailwindcss/vite將 @tailwindcss/vite 外掛加入你的 Vite 設定。
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})在你的 CSS 檔案中加入 @import 來匯入 Tailwind CSS。
@import "tailwindcss";使用 npm run dev 或你 package.json 檔案中設定的指令來執行建置流程。
npm run dev確保你編譯後的 CSS 已包含在 <head> 中（你的框架可能會自動處理這件事），然後開始使用 Tailwind 的通用類別來設定內容樣式。
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/style.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>