1. 開始使用
  2. 使用 PostCSS

安裝

開始使用 Tailwind CSS

Tailwind CSS 的運作方式是掃描您所有的 HTML 檔案、JavaScript 元件和任何其他範本中的類別名稱,產生對應的樣式,然後將它們寫入靜態 CSS 檔案。

它快速、靈活且可靠 — 零執行時間。

將 Tailwind CSS 安裝為 PostCSS 外掛程式

將 Tailwind CSS 安裝為 PostCSS 外掛程式是將其與 Next.js 和 Angular 等框架整合的最順暢方式。

01

安裝 Tailwind CSS

透過 npm 安裝 tailwindcss@tailwindcss/postcsspostcss

終端機
npm install tailwindcss @tailwindcss/postcss postcss
02

將 Tailwind 新增至您的 PostCSS 設定

@tailwindcss/postcss 新增至您的 postcss.config.mjs 檔案,或您專案中設定 PostCSS 的任何位置。

postcss.config.mjs
export default {  plugins: {    "@tailwindcss/postcss": {},  }}
03

匯入 Tailwind CSS

在您的 CSS 檔案中新增一個 @import,以匯入 Tailwind CSS。

CSS
@import "tailwindcss";
04

啟動您的建置程序

使用 npm run dev 或您的 package.json 檔案中設定的任何指令來執行建置程序。

終端機
npm run dev
05

開始在您的 HTML 中使用 Tailwind

請確保您的編譯 CSS 已包含在 <head> 中 (您的框架可能會為您處理此問題),然後開始使用 Tailwind 的實用類別來設定您的內容樣式。

HTML
<!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>
您是否遇到困難? 在不同的建置工具中設定 Tailwind 與 PostCSS 的方式可能略有不同。 請查看我們的框架指南,看看是否有針對您的特定設定的更詳細說明。
版權所有 © 2025 Tailwind Labs Inc.·商標政策