(1) Tailwind CSS 安裝

發表於 更新於 分類於
介紹如何安裝 tailwind 到專案

CDN 安裝

第一種安裝方式就是直接引入 tailwind 的 cdn， cdn連結。引入後就可以直接使用。

1
2
3
4
5
6
7
8
9
10
11
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">
    Hello world!
  </h1>
</body>

但正式專案不建議使用 tailwind

  1. CDN 若有問題，會連帶影響專案
  2. CDN 只是用來給開發階段使用，並不適合用來作為正式專案運行的方式

使用 Tailwind Cli

Tailwind CLI 專案開啟步驟

  1. 下載 node
  2. 桌面新增一個空的資料夾 「tailwind-demo」
  3. 在資料夾目錄底下安裝 tailwind
1
npm install -D tailwindcss
  1. 新增 tailwind.config.js
1
npx tailwindcss init
  1. 修改 tailwind.config.js
1
2
3
4
5
6
7
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

上面這段設定會去找 src 資料夾底下所有 html，js 檔，只要有使用 tailwind css 就會編譯。所以要在專案新增 src 資料夾，並新增 index.html

1
2
3
-src
 -index.html
tailwind.config.js
  1. 新增 input.css

在 src 資料夾下新增 input.css，並放入下面程式碼

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 編譯 CSS 檔案
1
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

上面這段指令就是指定 input css(編譯前檔案) 和 output css (編譯後檔案)，翻成白話文如下

1
input {CSS檔} output {輸出的CSS檔} 監控編譯
  1. 在 html 引入編譯後 css
1
2
3
4
5
6
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="../dist/output.css" rel="stylesheet">
</head>
  1. 運行 Live Server 查看結果

在 index.html 運行 live server 即可看到樣式被套用

  1. 整體專案結構
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tailwind-demo/
│
├─── dist/
│   │
│   └─── output.css
│
├─── node_modules/
│
├─── src/
│   │
│   ├─── index.html        
│   └─── input.css  
│
├─── tailwind.config.js    
└─── package-lock.json
  • src 資料夾是主要我們會更動的部分，(html 和 css)
  • dist 資料夾是編譯後產出的檔案
  • node_modules 是負責用來存放經由 npm 安裝過後的套件
  • tailwind.config.js 是 整專案的 Tailwind 配置設定
  • package-lock.json 使用 json 撰寫的描述文件