2023-10-01|閱讀時間 ‧ 約 4 分鐘

Tailwind CSS 的評估與介紹，使用Vue專案該如何建立？教學分享篇

@Pixabay

如果你正在尋找管理專案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>