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>

在你的vue檔案貼上這一段後可看到一個簡單的導覽列的樣式（如下圖）

如果有出現代表成功了，你也可以多試試看他提供的組件試著組出你需要的Layout，若你有遇到任何問題，也可以留言問我，如果我有看到會回覆的：)

其他參考

• 官方網站的Class用法

基本上背景、文字大小顏色、間距和排版都可以完成，若想要快速完成版面確實是不錯的工具，但是考量到專案性質不見得每個專案都適合使用，就讓各位工程師們評估和嘗試囉！