為什麼 Izzet Systems 採用 Tailwind CSS？— 強化前端開發效能的關鍵選擇

May 16

在現代網頁開發的環境中，UI 的設計與維護是一項極具挑戰的工作。為了提高開發效率與程式碼一致性，Izzet Systems 選擇導入 Tailwind CSS 作為我們核心的 CSS 框架，並應用於現有以 Vue 3 為主的前端架構中。

🌟 Tailwind CSS 簡介

Tailwind CSS 是一款功能強大的「原子化（utility-first）CSS 框架」，開發者可以直接在 HTML（或 Vue template）中使用類似 text-center、bg-blue-500、p-4 等實用類別，快速完成 UI 設計，而不需頻繁撰寫或命名額外的 class。它的設計理念是將樣式拆解成最小單位，強化一致性、模組化與可維護性。

✅ 為什麼我們選擇 Tailwind CSS？

以下是 Izzet Systems 決定使用 Tailwind 的三大理由：

1. 開發速度飛快

Tailwind 讓開發者幾乎不需切換上下文（Context Switching），能專注在組件與樣式上，減少撰寫額外 CSS 的時間。這對於快速交付產品尤為重要。

2. 設計一致性強

透過 Tailwind 的設計系統（如 spacing 、color palette 、font size 等），UI 元素風格保持一致，即使由多位工程師同時開發，也能維持統一外觀。

3. 容易維護與擴充

由於樣式都集中於 HTML 結構中，CSS 檔案更輕薄，也避免了 BEM 命名混亂、CSS 覆寫等問題。此外，Tailwind 支援主題、Plugin 與 PurgeCSS，讓大型專案也能輕鬆維護。

🔧 在 Vue 3 中安裝並設定 Tailwind CSS

我們目前所有前端專案皆採用 Vue 3。以下是如何在 Vue 3 中整合 Tailwind 的步驟與設定方式：

安裝步驟

1. 初始化專案

npm create vue@latest

2. 安裝 Tailwind CSS 與相關 Dependency

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. 設定 tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 新增 Tailwind 指令到 CSS 在 src/assets/tailwind.css 檔案中加入：

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

5. 在 main.js 中引入 Tailwind CSS

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'

createApp(App).mount('#app')

結語

Tailwind CSS 對我們來說，不僅僅是一個工具，更是一種設計與開發的語言。藉由它的高度一致性與開發效率，我們能更快將創意轉化為可用的產品界面，持續為客戶提供穩定且高品質的解決方案。

Bruce Chang