Vite React + Tailwind 4.0 + prettier-plugin-tailwindcss 安裝

最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以 Vite 6 + React 18.3 + Tailwind 4.0 + prettier-plugin-tailwindcss 0.6.11 安裝做記錄：

▍ 為什麼不是直接安裝 React 19

React 19 發布於 2024 年 12 月，但直到現在 2025 年 1 月底，還是有使用 create-react-app 安裝出錯的問題。

根據 網友解法 都是退回 18，或是用 Vite 安裝 React 18，所以這篇文章才會用這個框架組合。

▍ 安裝 Vite React + Tailwind

1. 安裝 Vite

npm create vite@latest

2. 安裝 Tailwind 4.0

npm install tailwindcss @tailwindcss/vite

3. 開啟 vite.config.ts，加入以下內容

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
    ... 你的其他 plugin
  ],
})

4. 配置 CSS
   依據 Tailwind 4.0 的更新說明，原本需要透過 tailwind.config.js 配置 css，但現在可以直接透過 css 檔案 @import 就可以使用了。所以我們可以打開 App.css，在最上方加入 tailwindcss，之後如果要設定 @theme 也是直接加在 App.css 中。

/* App.css*/
@import 'tailwindcss';

5. 撰寫測試
   開啟 App.jsx 寫一個簡單的 button 試試看。

// App.jsx
function App() {
  return (
    <>
      <button className="bg-black hover:bg-amber-800 text-2xl font-extralight hover:font-extrabold text-yellow-400 p-3">
        button
      </button>
    </>
  )
}

6. 預覽結果
   終端機輸入以下指令，開啟 Vite 專案預覽，應該能夠看到下圖

npm run dev

▍ 如何客製樣式

Tailwind 3 的版本，是將擴充和覆蓋樣式寫在 tailwind.config.js，範例如下：

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      // 覆蓋樣式
      'gray-light': '#ffffff'
    },
    extend: {
      // 擴充樣式
      colors: {
        'gray-light': '#d3dce6'
      }
    }
  },
  plugins: []
}

現在則是可以全部寫在 App.css 中，不再區分 colors 或 extend colors；變數記得加入前綴 --（變數前綴規定）：

// App.css
@import 'tailwindcss';
@import './customTheme.css'; /* 引入自訂的 css*/

@theme {
  /* 如果自訂 css 與 App.css 中有相同名稱樣式，會後覆蓋前*/
  --color-test: var(--color-orange-100); /* 新增顏色樣式，可以填入色彩代碼，也可以使用既有變數*/
  --color-blue-800:purple; /* 覆蓋顏色樣式，這裡把藍色改紫色*/
  --font-playwrite:"Playwrite IN", serif; /* 增加字體樣式（index.html 還是要記得引入字體呦）*/
}

這樣我們就可以使用這些自訂變數了

<button className="font-playwrite bg-test p-3 text-2xl font-extralight text-yellow-400 hover:bg-blue-800 hover:font-extrabold">
        button
      </button>

另外，如果在 @theme 中使用以下程式碼，代表停用所有預設樣式，並僅使用自訂值，除了 @theme 裡面寫的都會失效。

@theme {
  --*: initial; /* 停用所有預設樣式，並僅使用自訂值，除了 @theme 裡面寫的都會失效*/
}

▍ 安裝 prettier-plugin-tailwindcss

prettier-plugin-tailwindcss 是一個可以對樣式排序的外掛，這對於專案 DOM 樣式維護上是很方便的功能。讓我們安裝它！

1. 專案資料夾中的終端機輸入指令安裝

npm install -D prettier prettier-plugin-tailwindcss

2. 配置設定檔
   在專案根目錄下，新增一個名為 .prettierrc 的設定檔

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

或者也可以改新增 prettier.config.js 檔案，使用 module 方式設定，教學影片：https://www.youtube.com/shorts/ZFFsOx5twSw?si=NEm4em-iEyFJw4lw

3. 使用 Prettier 作為 Formatter
   我們回到 prettier-plugin-tailwindcss 的 GitHub 文件，下方有提到上面設定檔可以加入的各種規則，其中一項關於 tailwindConfig。因為 Tailwind 4.0 已經不需要透過 tailwind.config.js 使用 CSS，所以這項設定可以直接略過囉！
   接著確保我們的 Formatter 是使用 Prettier。

4. 測試結果
   隨意寫點什麼試試看，如果你沒有設定 Format:on Save（存檔自動格式化）的話，可以使用快捷 Shift + Alt + F 啟動 format，就可以看到效果了。從下圖可以看到 Hover 效果全部被移動到最後面。

▍ 延伸閱讀

• Vite 安裝方法
• Tailwind 4.0 安裝文件
• Tailwind 4.0 變數前綴規定
• prettier-plugin-tailwindcss GitHub