# TailwindCSS
## 大綱
- TailwindCSS 介紹
- 適用 TailwindCSS 的情境 (搭配前端框架，例如:Vue.js或React.js)
- 為什麼要使用TailwindCSS ?
- TailwindCSS 相比原生 CSS (附上截圖寫法)
- 使用 TailwindCSS 推薦安裝的擴充套件
## 為什麼要使用 Tailwind CSS？
1. 提高開發效率
原子化（Utility-First）設計：Tailwind 提供大量單一職責的 class，如 p-4, text-center, bg-blue-500 等，讓開發者可以直接在 HTML 中快速排版與設計，避免來回切換 CSS 和 HTML 檔案。
即時預覽效果：搭配例如 Vite + VS Code 的 setup，可在修改 class 的同時即時看到畫面變化，開發速度更快。
2. 減少 CSS 冗餘與命名困難
傳統 CSS 或 SCSS 需為每個元件命名與寫樣式，例如 .btn-primary, .card-header 等，容易出現命名衝突、樣式重複。
Tailwind 直接在 HTML 中使用 class，不需要為樣式命名，降低維護複雜度與認知成本。
3. 更好的元件化與一致性
結合如 Vue、React 等前端框架，Tailwind 容易封裝元件，class 命名具有一致性，不容易跑版。
使用設計系統時，可搭配 @apply 或自定義 theme，實現 UI 樣式一致性與設計規範化。
4. 客製化強與主題延伸性好
tailwind.config.js 可以自定義 breakpoints、color palette、spacing 等設計系統，讓設計師與工程師協作更緊密。
支援暗黑模式、RTL 語系、多主題切換等功能。
5. 效能佳、檔案小
Tailwind 預設使用 PurgeCSS（現在稱為 Content-aware tree-shaking），只保留實際用到的 class，最終生產環境 CSS 檔案通常小於 10KB，效能好、載入快。
6. 學習曲線相對平坦
開發者只要熟悉命名規則，即可快速上手。不需要記住 CSS 規範與兼容性問題，非常適合前端新手或跨領域學習者。
## 對比傳統 CSS / Bootstrap
| 特點 | 傳統 CSS | Bootstrap | Tailwind CSS |
| -------- | ------ | --------- | ------------ |
| 樣式設計自由度 | 高 | 中 | 高 |
| 學習成本 | 中高 | 低 | 中 |
| 元件一致性 | 需自行維護 | 有內建樣式 | 可自定義 + 元件化強 |
| 擴充與客製化能力 | 高 | 低中 | 非常高 |
| 最終檔案大小 | 易膨脹 | 中 | 小（自動剔除未用樣式） |
## tailwind.config.js設定
以Vite建構的Vue專案搭配TailwinCSS為例:
```content``` :這是重要的設定，它指定 Tailwind 要掃描哪些檔案，從中提取 class 名稱來生成實際使用的 CSS。
```js
// tailwind.config.js
module.exports = {
content: [
"./index.html", // 這是 Vite 預設的入口文件
"./src/**/*.{vue,js,ts,jsx,tsx}", // 在 src 目錄下的所有 Vue、JS、TS、JSX、TSX 文件都會被包含
],
theme: {
extend: {
colors: {
primary: "var(--color-primary)",
accent: "var(--color-accent)",
}
},
},
plugins: [
require('daisyui'), // TailwindCSS 支援的 UI
],
}
```
功能說明：
這是 Tailwind CSS 的 Purging 機制（又稱「Tree-shaking」）：
只保留實際在這些檔案中有使用到的 class，其他都會被移除，讓最終輸出的 CSS 更小、更快。
有官方文章網址嗎(?
## 使用 TailwindCSS 推薦安裝的擴充套件
Tailwind CSS IntelliSense
MIT License
## 適用情境
快速開發原型
自訂設計系統的企業專案
與 Vue、React、Next.js 等現代框架搭配
團隊協作、設計師交接時樣式統一
main.css內
```css=
@tailwind base;
@tailwind components;
@tailwind utilities;
```
@tailwind base;
引入 Tailwind 的「基礎樣式（Base styles）」
包含：CSS Reset、字體、元素預設樣式（如 body, h1, p 的預設行高與字型）
@tailwind components;
匯入 Tailwind 的元件樣式，用來支援像是 @apply 或插件產生的樣式（例如 daisyUI）
可放自己寫的樣式元件（例如按鈕組、卡片設計）
```css
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded;
}
```
@tailwind utilities;
引入 Tailwind 的 utility class 工具類別
像是 mt-4, text-center, bg-red-500, flex, gap-2... 這些都是在這邊定義進來
我個人使用過的TailwindCSS版本是3.4.17
"tailwindcss": "^3.4.17",
===============
為什麼 Tailwind CSS 需要它？
Tailwind CSS 是建立在 PostCSS 上的，它本身就是一個 PostCSS 插件。
postcss.config.js 裡通常會包含：
`tailwindcss`：把 Tailwind 的指令（如 ``@tailwind utilities;``）轉換成真正的 CSS
`autoprefixer`：自動幫你的 CSS 加上瀏覽器前綴（像 ``-webkit-``），提高相容性
Sign in with Wallet
Connect another wallet