如果你正在尋找管理專案CSS的工具，可以考慮Tailwind CSS，以下列出使用的優缺點，給各位工程師評估，若你只是想要了解Tailwind CSS是什麼，本篇介紹也可以讓你快速理解。
Tailwind CSS 評估
優點
- 根據網站提供的Componets確實可以快速產生有質感的Layout
- 若熟悉CSS語法，相較學習成本比較低，只要在Class寫上Tailwind規範的Class即可享有同樣的樣式
- 可以有效控制屬性，基本上都直接使用不會有太多自定義的情況
- 商業後台，有系統性的專案非常適合
缺點
- Class過長，造成Code凌亂，修改須注意複寫
- 好看的模板要課金，無法直接使用
- Model用法偏原始需要自己寫，相較其他 UI Framework已經處理好了
- 客端專案，太多彈性和客製的專案不適合
如何使用 Tailwind CSS
Step1：下載
npm install -D tailwindcss
npx tailwindcss init -p
下載完成後可在專案內看到 tailwind.config.js
Step2：設置作用域
At tailwind.config.js /** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./public/**/*.html",
"./src/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
這樣設定是表示在每個vue檔案都可以直接使用Tailwind CSS
Step3：載入資源
At src\css\tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;
沒有特別不需要什麼或需要什麼的話，按照這個預設即可
Step4：下載依賴的環境
npm install -D postcss
如果你的專案已經有 postcss 可略過 install 的步驟
At postcss.config.js 確認支援 Tailwind CSS
module.exports = {
plugins: {
tailwindcss:{}, // 加上這行
autoprefixer:{},
}
}
Step5：測試是否成功
<div class="z-10 overflow-hidden border-b flex justify-center fixed top-0 left-0 right-0 bg-white">
<router-link to="/" class="font-medium text-gray-500 hover:text-gray-900 px-2 py-2">Lesson</router-link>
<router-link to="/cart" class="font-medium text-gray-500 hover:text-gray-900 px-2 py-2">Cart</router-link>
</div>
在你的vue檔案貼上這一段後可看到一個簡單的導覽列的樣式（如下圖）
如果有出現代表成功了，你也可以多試試看他提供的組件試著組出你需要的Layout，若你有遇到任何問題，也可以留言問我，如果我有看到會回覆的：)
其他參考
基本上背景、文字大小顏色、間距和排版都可以完成，若想要快速完成版面確實是不錯的工具，但是考量到專案性質不見得每個專案都適合使用，就讓各位工程師們評估和嘗試囉！
