前言

本文是作為一個額外內容，主要介紹 tailwindcss 的用法

tailwindcss 是一個功能類優先的 CSS 框架，我在以前的文章裡有描述為什麼使用功能類優先：為什麼我在 css 裡使用功能類優先

在上一章中我們的 react 元件有了一個簡單的樣式，在這一篇我們將使用 tailwindcss 來重新編寫它的樣式。我將使用我們上一章的程式碼為例子。

Tailwind CSS 前置知識

不要害怕功能類優先的寫法，總體來說它其實和我們傳統的 CSS 寫法沒有什麼不同，如果你會寫 CSS，那就一定很容易上手功能類優先的寫法。

如果你之前使用過 boostrap，那就更容易入手 tailwind 了，你完全可以當成 bootstrap 來寫。

如果你完全不會 CSS，只想找一個元件庫來使用，那麼這篇文章就不適合你了。

安裝

在專案根目錄下開啟終端，輸入

npm install -D tailwindcss@latest

這個命令將在你的 devDependencies 中安裝 tailwindcss，我們只需要在開發時使用這個包，所以確保安裝在你的 devDependencies 中。

安裝 vs code 外掛，推薦

如果你使用的時 vs code 編寫程式碼，那麼我推薦你安裝這個外掛，Tailwind CSS IntelliSense，它會在你開發的時候給你提供樣式輸入的便利。

配置檔案

安裝好後，在終端中輸入命令：

npx tailwindcss init
 

將在根目錄下幫我們新建一個預設的配置檔案。

配置檔案的內容如下：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

也可以手動建立這個檔案。

我們先看這個 content 屬性，這個屬性用來表示我們要用到樣式的原始檔路徑。我們寫入如下的路徑：

module.exports = {
  content: ["./src/**/*.{ts,tsx,jsx,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

這樣，我們就告訴了 tailwind：根目錄 src 資料夾下的所有以 ts,tsx,jsx,js 結尾的檔案都會使用 tailwindcss。使用生成 tailwind 生成樣式檔案的時候會參考這些檔案裡的 css 類。

其他的配置我們先不說，等使用到了在說明。

生成樣式檔案

在這個時候我們就已經可以使用 tailwind 來生成樣式檔案了。我們在終端中輸入：

npx tailwindcss -o ./src/styles/tailwind.css

上面的命令用於執行 tailwind 的功能來生成樣式檔案，引數 -o 指定生成的樣式檔案放在什麼地方。執行之後，你應該會看到如下的輸出：

這是因為你還沒有寫任何的 tailwind 功能類，所以也就沒有生成樣式檔案。接下來我們在子元件 Displayer 裡寫功能類，首先先改造 .container 這個類。原來的樣式是這樣的：

// 元件
export function Displayer(/* 省略 */) {
  //  省略
  return (
    <div className="container">
      {/* 省略 */}
    </div>
  );
}

//  css
.container {
  background-color: rgb(40 40 40);
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 10px;
}

改為如下寫法:

// 元件
export function Displayer(/* 省略 */) {
  //  省略
  return (
    //  功能類寫法
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      {/* 省略 */}
    </div>
  );
}

再執行 npx tailwindcss -o ./src/styles/tailwind.css，生成樣式檔案，你會在目錄下看到生成的檔案：

點進入檢視內容，你會看到幫你生成的 css 樣式，除了一些基本樣式之外，在檔案的最下方，會看到我們剛剛使用的功能類樣式：

這也是和 bootstrap 不同的地方，bootstrap 是一次匯入所有的樣式，tailwindcss 是生成你用到的樣式，大大減少了體積。

最後我們在我們的根元件下引入 tailwind.css 這個檔案。

//  main.tsx
import "./styles/tailwind.css";

//  省略

啟動專案後便能夠看到效果了，也是和我們以前一樣：

功能類用法解釋

我們首先用瞭如下幾個功能類：bg-gray-800 text-white p-2 m-2 rounded-lg。如果你用過 bootstrap 的話，那麼你應該對這種寫法很熟悉了。如果沒用過，那麼其實就是普通的 css 類，在 F12 裡檢視樣式，就能看到。tailwind 裡定義了一套常用的類給我們使用，像例子中

• bg-gray-800 表示背景顏色（background-color）為灰色（gray），800 表示灰色有多濃厚。
• text-white 表示字型顏色（color）是白色（white）。
• p-2 表示內邊距（padding）的值為 2，在 tailwind 中是 0.5rem。
• m-2 表示內邊距（margin）的值為 2，在 tailwind 中是 0.5rem。
• rounded-lg 表示邊框圓角（border-radius），要多圓？lg 的程度，在 tailwind 中是 0.5rem。

功能類的用法其實直接將我們語義類的用法展開而已。

啟動時的配置

在我們生成樣式檔案的時候是在終端輸入命令來生成的，這樣每次都要敲一遍命令太麻煩了，我們可以把命令修改成

npx tailwindcss -o ./src/styles/tailwind.css --watch

--watch 引數是讓 tailwind 監聽，隨時生成最新的樣式檔案，這樣就不需要時不時手動生成了。

更方便一點，可以將我們的啟動指令碼修改為：

{
//  省略
"scripts": {
    "dev": "run-p dev:*",
    "dev:css": "tailwindcss -o ./src/styles/tailwind.css --watch",
    "dev:server": "vite",
    //  省略
  },
  "devDependencies": {
    //  省略
    "npm-run-all": "^4.1.5",
    //  省略
  }
//  省略
}

我們讓 tailwind 的監聽隨著我們的專案開發啟動而啟動，省去了輸入命令。

這裡我使用了 npm-run-all 這個包，能夠幫我們方便的執行多個指令碼。使用時要記得先安裝，關於用法看文件，在這裡不說明。這樣在我們使用 npm run dev 的時候，就會啟動 tailwind 的監聽和啟動專案的開發伺服器。

修改我們的功能類，你可以看到 tailwind 會自動幫我們生成最新的樣式，方便之極。

有那些功能類可以使用？

基本上只要你能用到的效果，tailwind 都有提供。而且除了基本的樣式之外，tailwind 也封裝了一些常用到的效果，像 ring，這個類用於在元素的周圍加上一圈光環。其他效果具體有什麼還是要去看文件的 tailwind 文件。

下面我介紹幾種比較特殊的用法。

變體

tailwind 的變體寫法是用於實現偽類的樣式效果。

比如在我們把滑鼠移動到元素後需要元素改變樣式，我們會使用到偽類 :hover，在 tailwind 裡使用功能類也可以指定應用到偽類，通過新增 hover: 來使關聯的功能類在 hover 時生效。示例如下：

<div className="hover:text-center"></div>

上面的寫法，在 text-center 前加上 hover: 字首，使其應用在了 hover 偽類裡，相當於：

.text-center:hover {
  text-align: center;
}

tailwind 還有許多常用的變體，可在文件 變體 中檢視。

封裝常用樣式

如果多個相同元素的樣式是一摸一樣的，那麼每次都重複編寫功能類就會顯得繁瑣。對這種情況推薦封裝樣式，有以下兩種寫法。

1、 全域性類

通過在專案中額外引入一個全域性的 css 檔案，將可重用的樣式寫在裡面。

新建全域性 css 檔案：

編寫樣式：

/* global.css */
/* 全域性樣式 */
.btn {
  background-color: rgb(81, 81, 206);
  text-align: center;
}

在根目錄中引入：

import "./styles/global.css";

之後便可以直接在元素上使用：

<button className="btn"></button>

2、包裝常用元件

這也是推薦的方式，包裝成一個常用的元件。如下：

//  將常用的 button 樣式封裝到新的元件中
export function Button(props: any) {
  const { children, ...newProps } = props;
  return (
    <button className="bg-gray-300" {...newProps}>
      {children}
    </button>
  );
}

以後便可以用這個元件 <Button>按鈕</Button> 代替原生的 <button>按鈕</button>。

參考

Tailwind CSS by Tailwind CSS