安裝所需元件
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
