在沒有 Webpack 的非現代化專案 Localize Tailwind CSS CDN

Why don’t just simply use CDN?

CDN 只適合用於開發初期需要快速建構出原型，快速切版用，但是一般在正式 Production 環境上不會使用 CDN

除了會一直被大部分瀏覽器警告外，主要是因為 CDN 會有以下幾個問題：

• 仰賴網路連線，(可能)會增加頁面加載時間
• 缺乏版控

Localizing Tailwind CSS CDN

對於像是 React, Vue, Angular 這種 app 來說，要 Localizing Tailwind CSS 是在簡單不過的事了，專案初期下完 npx create-react-app my-app 後，大多數基本的 config 都已經幫你做好了，只需要下 npm install tailwindcss 並用 CLI 再下幾個指令即可

但是超過 20 年 legacy 專案，就必須自己判斷需創建哪些 config 檔，並且要自己創建並編輯 package.json 檔寫一些 script 來幫助你將 Tailwind CSS CDN Localizing。

Step 1: Install Tailwind CSS

1. npm init
2. npm install or npm i

一開始這類專案是連 npm 及 node 都沒有，所以先還得先下載 node 並安裝，並在專案資料夾下下 npm init，在初始化過程中全部先按 Enter 的情況下，會看到 package.json 檔內容如下：

1
2
3
4
5
6
7
8
9
10
11

{
 "name": "your-project-name",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

接著下npm install基本上就能看到專案資料夾多了 package-lock.json 檔案，若有額外安裝套件，node_modules也會一併出現，接著就可以開始安裝 Tailwind CSS 了。

Step 2: Create Tailwind CSS config file

基本上這邊的步驟都跟 Tailwind 官方 Docs 一樣。

1. npm install -D tailwindcss
2. npx tailwindcss init

做完步驟 1,2 時應就能看到 tailwind.config.js 檔出現在專案目錄下，依照自己專案去進行客製化。

• Purge：剔除你的應用程式中未使用的 CSS。當 Purge 被啟用時，Tailwind 將會檢查你在 tailwind.config.js 的 content 進行配置的所有文件，並將未在這些文件中找到的樣式類從最終的 CSS 文件中移除。 (Tailwind CSS v3.0 後直接包括在 content 中)
• Content：包含了 Tailwind CSS 要掃描的檔案路徑，
• Theme：用來設定顏色、字體、間距等，
• Variants：設定各種 Tailwind CSS 變體，如 hover、focus、active 等，
• Plugins：設定 Tailwind CSS 的套件。

1
2
3
4
5
6
7
8
9
10
11

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
  "body/**/*.php", // 包含 body 目錄下的所有 .php 檔案，包括 body 目錄底下的子目錄中的檔案
 ],
 theme: {
  extend: {},
 },
 variants: {},
 plugins: [],
};

在 package.json 能看到剛剛用 npm 安裝的 tailwindcss 套件

1
2
3
4
5
6
7
8

{
 "name": "your-project-name",
  .............
 "license": "ISC",
 "devDependencies": {
  "tailwindcss": "^3.3.2"
 }
}

Step 3: Create Tailwind CSS CDN Localizing script

1. 在 CSS 目錄下新增一個 input.css 及 output.css 檔案

2. 在 input.css 檔案加入以下內容及你想客製化的樣式

   1 2 3

   @tailwind base; @tailwind components; @tailwind utilities;

3. npm install autoprefixer

4. 創建 postcss.config.js 檔案，並加入以下內容

   1 2 3 4 5 6

   module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

5. 在 package.json 的 scripts 加入自定義指令

   1 2 3 4 5 6 7 8 9 10

   { "name": "your-project-name", ............. "devDependencies": { "tailwindcss": "^3.3.2" }, "scripts": { "build:css": "postcss ./css/input.css -o ./css/output.css" } }

6. npm run build:css

Tailwind CLI 參數說明：

• -c ./tailwind.config.js：使用自訂的 Tailwind 配置檔 tailwind.config.js。
• -i css/input.css：輸入檔案的位置，這裡是 css/input.css。
• -o css/output.css：輸出檔案的位置，這裡是 css/output.css。

Replacing the Tailwind CSS CDN

將 CDN 換成編譯過後的 CSS 檔案，查看網頁樣式是否有正常顯示

1
2
3
4

<!-- TailwindCSS CDN -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<!-- 編譯後的 TailwindCSS -->
<link rel="stylesheet" href="/css/output.css" />

此時在去主控台查看，開頭提到的警告訊息應就不會再出現

• ← Previous Post
• Next Post →