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

紀錄 plain php 專案 Localize Tailwind CSS CDN 的步驟

Posted by Young on 2023-02-13
Estimated Reading Time 4 Minutes
Words 996 In Total
Viewed Times

Why don’t just simply use CDN?

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

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

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

cdn_warning

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.cssoutput.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" />

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


若您覺得這篇文章對您有幫助,歡迎分享出去讓更多人看到⊂◉‿◉つ~


留言版