Tailwind+Vite起手式

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Using PostCSS 官方文件

</aside>

1.設定.gitignore,git init,npm init

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ └── .gitignore

目前為止的資料夾結構如上

</aside>

這邊記得先製作一個commit

git init & npm init 的部分則不在這個部分贅述

2.使用NPM安裝Tailwind

npm install -D tailwindcss postcss autoprefixer

其中的-D是npm install中的一個選項，是—-save-dev的縮寫，如果有啟用這個設定的話則會安裝在devDependencies中，代表這個是開發中會使用到的套件而不是正式上線的時候使用的套件。

• autoprefixer是為了加上各個瀏覽器的前綴，例如 -webkit-min-device-pixel-ratio: 2
• 因為Tailwind本身很大一包，需要使用postcss，可以讓撰寫的CSS精簡化，讓沒有使用到的CSS可以被刪減而不會被編譯出來。
• tailwindcss就不用說明了… css本人！

<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json └── readme.md

目前為止的資料夾結構如上

</aside>

3.使用NPM安裝Vite等等其他相依套件

npm install -D ejs vite vite-plugin-ejs
npm install vite-plugin-live-reload glob gh-pages sass sass-loader

目前為止，在package.json中的內容如下

{
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "ejs": "^3.1.9",
    "postcss": "^8.4.30",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.9",
    "vite-plugin-ejs": "^1.6.4"
  },
  "dependencies": {
    "gh-pages": "^6.0.0",
    "glob": "^10.3.7",
    "sass": "^1.68.0",
    "sass-loader": "^13.3.2",
    "vite-plugin-live-reload": "^3.0.2"
  }
}

以上套件的說明如下

1. autoprefixer:
   • 用於自動為 CSS 添加瀏覽器前綴，以確保在不同瀏覽器中具有相同的樣式效果。通常在開發期間使用。
2. ejs:
   • Embedded JavaScript (EJS) 是一個模板引擎，用於生成動態 HTML 內容。它可以幫助你在後端生成 HTML，或在前端透過 JavaScript 嵌入動態內容。
3. postcss:
   • PostCSS 是一個用於處理 CSS 的工具，它允許你使用插件來轉換、優化和擴展 CSS。常用於前端開發中的 CSS 後處理。
4. tailwindcss:
   • 一個高度可自訂的 CSS 框架，用於快速開發現代網頁界面。它基於一組預定義的 CSS 類別，可用於快速構建 UI 元素。
5. vite:
   • Vite 是一個快速的前端開發工具，用於建構現代的 Web 應用程式。它具有快速的開發伺服器、即時重載等功能。
6. vite-plugin-ejs:
   • 這是一個 Vite 插件，用於支援 EJS 模板。它讓你可以在 Vite 專案中使用 EJS 進行動態內容生成。

在 "dependencies" 中的套件：

1. @tailwindcss/forms:
   • 這是 Tailwind CSS 的一個官方插件，用於樣式化 HTML 表單元素，使它們與 Tailwind CSS 的風格一致。
2. gh-pages:
   • 一個用於將靜態網站部署到 GitHub Pages 的工具。通常用於將網站部署到 GitHub。
3. glob:
   • 一個用於匹配文件路徑的工具，通常用於在 Node.js 中進行文件操作，如檔案搜索。
4. sass 和 sass-loader:
   • 用於處理 SASS（Syntactically Awesome Style Sheets）或 SCSS（Sassy CSS）的套件。它們允許你在專案中使用 SASS 或 SCSS 語法來編寫 CSS。
5. vite-plugin-live-reload:
   • 這是一個 Vite 插件，用於實現網頁的即時重載功能，使你在開發期間可以看到即時的變更效果。

4.設定package.json的scsripts

回到package.json中，設定scripts的一些腳本如下

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "vite build && gh-pages -d dist"
  }

所以目前的package.json應該要長得像下面這樣

{
  "name": "專案名稱",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "vite build && gh-pages -d dist"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "ejs": "^3.1.9",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3",
    "vite": "^4.2.0",
    "vite-plugin-ejs": "^1.6.4"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.4",    //這個我在上面並沒有特別安裝，如果有需要再去tailwind官方查詢，有介紹到表單的套件
    "gh-pages": "^5.0.0",
    "glob": "^10.2.2",
    "sass": "^1.61.0",
    "sass-loader": "^13.2.2",
    "vite-plugin-live-reload": "^3.0.2"
  }
}

⚠️ 這邊需要注意！因為後續會使用到export default的es module語法，所以這邊一定要在package.json中設定"type": "module"

否則會跳以下的警告：To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

5.設定vite.config.js

新增一隻vite.config.js檔案，寫入以下內容

import { defineConfig } from 'vite';
import { ViteEjsPlugin } from 'vite-plugin-ejs';
import { fileURLToPath } from 'node:url';
import path from 'node:path';
import { glob } from 'glob';

import liveReload from 'vite-plugin-live-reload';

function moveOutputPlugin() {
  return {
    name: 'move-output',
    enforce: 'post',
    apply: 'build',
    async generateBundle(options, bundle) {
      for (const fileName in bundle) {
        if (fileName.startsWith('pages/')) {
          const newFileName = fileName.slice('pages/'.length);
          bundle[fileName].fileName = newFileName;
        }
      }
    },
  };
}

export default defineConfig({
  // base 的寫法：
  // base: '/Repository 的名稱/'
  base: '/web-layout-training-vite/',
  plugins: [
    liveReload(['./layout/**/*.ejs', './pages/**/*.ejs', './pages/**/*.html']),
    ViteEjsPlugin(),
    moveOutputPlugin(),
  ],
  server: {
    // 啟動 server 時預設開啟的頁面
    open: 'pages/index.html',
  },
  build: {
    rollupOptions: {
      input: Object.fromEntries(
        glob
          .sync('pages/**/*.html')
          .map((file) => [
            path.relative('pages', file.slice(0, file.length - path.extname(file).length)),
            fileURLToPath(new URL(file, import.meta.url)),
          ])
      ),
    },
    outDir: 'dist',
  },
});

<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── readme.md └── vite.config.js

目前為止的資料夾結構如上

</aside>

6.設定postcss.config.js

在官方文件中有提到，不管有沒有要使用postcss,都需要加上這個postcss.config.js檔案

並且將autoprefixer還有tailwindcss加入postcss.config.js這隻檔案

所以我們需要創建一個postcss.config.js檔案，並且寫入以下資料 （我們這邊不採用官方的module.exports的寫法，而是使用export default）

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── postcss.config.js ├── readme.md └── vite.config.js

目前為止的資料夾結構如上

</aside>

7.設定tailwind.config.js

新增一個tailwind.config.js，並且設定如下（這邊同樣不採用官方提供的module.exports的寫法，改用export default）

或是官方資料有寫到可以使用npx tailwindcss init 指令，會自動生成tailwind.config.js

<aside> 🔥 content 陣列的用途

</aside>

<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── postcss.config.js ├── readme.md ├── tailwind.config.js └── vite.config.js

目前為止的資料夾結構如上3

</aside>