在 JavaScript 專案使用 Tailwind CSS UI 框架

Others
, , ,

前言

Tailwind CSS 的 CDN 連結只適用於開發環境，如果要在正式環境使用，可以安裝 Tailwind CLI 工具。

做法

安裝 tailwindcss 依賴套件。

1
npm install -D tailwindcss

初始化專案，建立 tailwind.config.js 設定檔。

1
npx tailwindcss init

修改 tailwind.config.js 檔，其中 content 參數是指向專案中 .html 檔或 .js 檔的路徑。

1
2
3
4
5
6
7
8
9
module.exports = {
  content: [
      './**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

修改主要的 CSS 樣式檔，添加 @tailwind 裝飾器。

1
2
3
4
5
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {}

修改 package.json 檔。

1
2
3
4
5
6
{
    "scripts": {
        "watch": "tailwindcss -i ./src/style.css -o ./dist/style.css --watch",
        "build": "tailwindcss -i ./src/style.css -o ./dist/style.css --minify"
    }
}

執行編譯。

1
npm run build

將編譯後的 style.css 檔引入到 index.html 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="dist/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello World!
  </h1>
</body>
</html>

參考資料