前言

先說! 我覺得版上已經有很多寫得非常好的 Tailwind 系列文章
例如 排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！
或 TailwindCSS — 從零開始 ;

加上我並沒有寫過 v4 之前的 Tailwind (後面以 TW 簡稱)，
只是在 v4 後，關於配置的方面有些變動;

再加上最近有看到一套專案同時共用兩個 UI 框架的用法，

覺得蠻有趣的，在這邊分享自己的心得跟使用方法。

首先先講解一下為何我要同時使用兩個 UI 框架，
過去覺得一個專案就該用一個框架，不然會有互相污染的問題。

例如說我用了 TW 那我就不該再用 Bootstrap ，
但這樣有一個問題是 Tailwind 的組件，是要花錢的真嗣謝了。

等於說我基本上要全手刻，手刻練習是很好，
但如果開發上時程比較緊縮，那很要命。

後來有看到一個做法是把 layout 層跟 component 層分成不同的框架去管理，
這次呢我們將會採取 TW + PrimeVue。

TW 的 utility class 可以非常快速的建置 layout 而且彈性也很大，
因為 layout 的重用性相對低，改動機率可能更高，相對的更適合。

PrimeVue 自帶多種已經有 UI base 的框架，負責 component 層，
省去很多手刻要處理的麻煩事。

舉個例子，<input type=”date”> 的 datepicker 根本不讓你改，
這時候使用套件很好的解決的這個問題，也可以再包一層做風格定義、邏輯處理、etc.

最後一篇文章會說明怎麼使用 CSS variable 同時配置兩個框架的 Design token。

基礎配置

安裝

在安裝上一樣是很簡單的

$ npm install tailwindcss @tailwindcss/vite

下一步引入插件

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' //引入插件
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

配置

接下來下一步就不太一樣了，
v4 以前的版本會要你產生配置檔，然後在 extends 擴充一些你自己的設定

但 v4 後就沒有這個配置檔，全部都在 CSS 檔裡面去做處理就好，
如果你沒有 style.css 或是 main.css 可以創建一個，
總之就是在你的主要 CSS 檔裡面做配置。

v4 以前

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

$ npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

要引入三個 layer 然後為了要產生給網站看的 CSS 檔，
還要用 Tailwind CLI 進行編譯，就真的 好麻煩

如果你在配置過去的檔案的時候有遇到這個討厭的黃蚯蚓

可以安裝一個擴充叫做 PostCSS Language Support

就能順利解決了!

v4 ( 目前最新做法 )

// main.css
@import "tailwindcss"; // 在 CSS 檔開頭加上這行

對!就這樣就好，簡單吧，
然後你就馬上可以開始在 <template> 中使用各種 utility class 了

使用

使用上的話我們要先安裝一個擴充 Tailwind CSS IntelliSense，

讓我們不用去背所有的 utility class。

接下來我們打開隨意一個 Vue 檔，先來小試身手
試著吧 h1 改成紅色的字

▲Tailwind CSS IntelliSense 的語法提示

<template>
  <h1 class="text-red-500">鐵人賽</h1>
</template>

這時候你可能會發現有一個問題

我明明字的顏色有變紅，但我的 h1 怎麼好像不是 h1 的大小，而是 16px。

這並不是 Bug 或是你配置有問題，因為這是 TW 的 Preflight 機制，
這是基於 CSS modern-normalize的概念，
去把一些基礎樣式去除，省去你重新配置的麻煩。

所以我們可以到 style.css 去做設定

@import "tailwindcss";

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }
}

這邊有兩個可能看起來陌生的指令，@apply & @layer
@apply
可以讓你在 CSS 檔使用 utility class，並再包成自己常用的樣式。
@layer
在 TW 中，可以分為三層 :

▲ 權重越高的可以壓過越低的

通常我會這樣分每層該放什麼

• base -> HTML element ，如 h1
• components -> 常用原子元件，如 btn、input
• utilities -> 第三方套件的 class

讓我們回到剛剛的範例，就等於說我在 base 層為 h1 加上了 text-4xl font-bold
再來檢查一下畫面 :

很棒! 順利解決了

結語

在今天這篇文中我們進入 UI 框架章節，
解釋為什麼我考慮不只使用一個 UI 框架來解決問題。

從 Tailwind 開始，講解了 v4 該如何安裝使用，
Preflight 機制，自定義配置，以及特殊語法@apply @layer。

Tailwind 有太多 class 可以使用，但基本上都是建立於基本 CSS 知識，
因此我建議要學習 Tailwind 之前最好要熟悉 CSS ;

Sass 就先不用沒關係，因為 v4 不應該與 Sass 或其他預處理同時使用。

秉持這個篇章的觀念，要學會套件你應該做的是先開始使用，
而不是過多的查一些你不一定用到的知識，但學好又是另一回事了。

明天! 就進入 PrimeVue 讓你不用造輪子。
如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧。

一些小練習

1. utility class 跟一般 class 比起來優缺點在哪 ?
2. Tailwind v4 跟過去的版本比，少了哪個檔案，改由什麼檔案統一管理?
3. 試著用 Tailwind 做出一個水平垂直置中於頁面的黑色卡片，並自定義你喜歡的內容