最近工作上可能要用 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
- 安裝 Vite
npm create vite@latest- 安裝 Tailwind 4.0
npm install tailwindcss @tailwindcss/vite
- 開啟 vite.config.ts，加入以下內容
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
... 你的其他 plugin
],
})
- 配置 CSS
依據 Tailwind 4.0 的更新說明，原本需要透過tailwind.config.js配置 css，但現在可以直接透過 css 檔案@import就可以使用了。所以我們可以打開 App.css，在最上方加入 tailwindcss，之後如果要設定@theme也是直接加在 App.css 中。
/* App.css*/
@import 'tailwindcss';
- 撰寫測試
開啟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>
</>
)
}
- 預覽結果
終端機輸入以下指令，開啟 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: []
}
Tailwind 4 則是可以全部寫在 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 樣式維護上是很方便的功能。讓我們安裝它！
- 專案資料夾中的終端機輸入指令安裝
npm install -D prettier prettier-plugin-tailwindcss
- 安裝 Prettier - Code formatter，一定必須安裝 Code formatter 才有辦法運作。
- 配置設定檔
在專案根目錄下，新增一個名為.prettierrc的設定檔
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
或者也可以改新增 prettier.config.js 檔案，使用 module 方式設定，教學影片：https://www.youtube.com/shorts/ZFFsOx5twSw?si=NEm4em-iEyFJw4lw
- 使用 Prettier 作為 Formatter
我們回到prettier-plugin-tailwindcss的 GitHub 文件，下方有提到上面設定檔可以加入的各種規則，其中一項關於tailwindConfig。因為 Tailwind 4.0 已經不需要透過tailwind.config.js使用 CSS，所以這項設定可以直接略過囉！
接著確保我們的 Formatter 是使用 Prettier。
- 測試結果
隨意寫點什麼試試看，如果你沒有設定 Format:on Save（存檔自動格式化）的話，可以使用快捷 Shift + Alt + F 啟動 format，就可以看到效果了。從下圖可以看到 Hover 效果全部被移動到最後面。
2025-07-16 更新
- prettier-plugin-tailwindcss 提出：「使用 Tailwind CSS v4 時，您必須指定 CSS 檔案入口點，其中包含主題、自訂實用程式和其他 Tailwind 設定選項。為此，請使用
tailwindStylesheetPrettier 配置中的相應選項。」意思指如果你有自訂tailwind.config.js（例如改顏色、字級）就需要加入這行語法。
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/App.css" // 新增這行，路徑視專案修改
}
- 如果前面設定都無法讓 prettier-plugin-tailwindcss 運作，你又是使用 VScode 編輯，可以試試看在專案根目錄找到 .vscode/setting.json（或自己建立）。在 json 中加入以下語法，就可以請「當前專案」用指定方式進行格式化囉！
"editor.defaultFormatter": "esbenp.prettier-vscode"
