Vue專案加入 Tailwind CSS

安裝所需元件

Tailwind CSS 是近年熱門流的CSS 樣式工具套件。class名稱簡單易理解是他的最大特色之一，在設計上不易被其他前端框架套件拘束。是一個入門門檻低的前端樣式好用工具。

使用npm安裝元件

npm install -D tailwindcss@latest postcss autoprefixer

初始tailwindcss

npx tailwindcss init -p

這個指令會產生兩個檔案:

• tailwind.config.js
• postcss.config.js

編輯設定

tailwind.config.js

將需要帶入CSS的程式檔加入設定

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,ts,vue}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在CSS裡加入tailwind

將css帶入程式

接下來建立input.css並加入以下設定

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

再用以下指令產生正式index.css

npx tailwindcss -i ./src/input.css -o ./src/index.css --watch

接下來在main.js或main.ts引入CSS檔

import { createApp } from "vue";
import "./index.css";

// ...
app.mount("#app");
// ...

CLI指令的--watch參數，提供在編輯時期的watch mode，即時產生所需的css設定加入./src/index.css

Rebuilding...
Done in 100ms.

當每次將tailwind的CSS Tag加入 class中，watch mode會隨著產生相應的設定增加到index.css，接著就可以看到index.css檔案裡內容的變化。

參考:

https://tailwindcss.com/docs/installation

https://v2.tailwindcss.com/docs/guides/vue-3-vite