安裝
Tailwind CSS 的運作方式是掃描您所有的 HTML 檔案、JavaScript 元件和任何其他範本中的類別名稱,產生對應的樣式,然後將它們寫入靜態 CSS 檔案。
它快速、靈活且可靠 — 零執行時間。
將 Tailwind CSS 安裝為 PostCSS 外掛程式是將其與 Next.js 和 Angular 等框架整合的最順暢方式。
透過 npm 安裝 tailwindcss
、@tailwindcss/postcss
和 postcss
。
npm install tailwindcss @tailwindcss/postcss postcss
將 @tailwindcss/postcss
新增至您的 postcss.config.mjs
檔案,或您專案中設定 PostCSS 的任何位置。
export default { plugins: { "@tailwindcss/postcss": {}, }}
在您的 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="/dist/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>