Tailwind CSS 首頁
  1. 安裝
  2. 使用 Parcel 安裝 Tailwind CSS

  1. 建立專案

    如果你還沒有設定新的 Parcel 專案，請先建立一個。最常見的方法是將 Parcel 新增為專案的開發相依性，如其 入門指南 中所述。

    終端機
    mkdir my-projectcd my-projectnpm init -ynpm install -D parcelmkdir srctouch src/index.html

  2. 安裝 Tailwind CSS

    透過 npm 安裝 tailwindcss 及其對等相依性，然後執行 init 指令產生 tailwind.config.js。

    終端機
    npm install -D tailwindcss postcssnpx tailwindcss init

  3. 設定 PostCSS

    在專案根目錄建立 .postcssrc 檔案，並啟用 tailwindcss 外掛。

    .postcssrc
    {
  "plugins": {
    "tailwindcss": {}
  }
}

  4. 設定範本路徑

    在 tailwind.config.js 檔案中加入所有範本檔案的路徑。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. 在 CSS 中加入 Tailwind 指令

    建立 ./src/index.css 檔案，並為 Tailwind 的各個層級加入 @tailwind 指令。

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. 開始建置程序

    使用 npx parcel src/index.html 執行建置程序。

    終端機
    npx parcel src/index.html

  7. 開始在專案中使用 Tailwind

    將 CSS 檔案加入 <head>，並開始使用 Tailwind 的公用程式類別設定內容樣式。

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./index.css" type="text/css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>