Ann Chou Coding
0%

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
1
npm create vite@latest
  1. 安裝 Tailwind 4.0
1
npm install tailwindcss @tailwindcss/vite
  1. 開啟 vite.config.ts，加入以下內容
1
2
3
4
5
6
7
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
    ... 你的其他 plugin
  ],
})
  1. 配置 CSS
    依據 Tailwind 4.0 的更新說明，原本需要透過 tailwind.config.js 配置 css，但現在可以直接透過 css 檔案 @import 就可以使用了。所以我們可以打開 App.css，在最上方加入 tailwindcss，之後如果要設定 @theme 也是直接加在 App.css 中。
1
2
/* App.css*/
@import 'tailwindcss';
  1. 撰寫測試
    開啟 App.jsx 寫一個簡單的 button 試試看。
1
2
3
4
5
6
7
8
9
10
// 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>
    </>
  )
}
  1. 預覽結果
    終端機輸入以下指令，開啟 Vite 專案預覽，應該能夠看到下圖
1
npm run dev

Vite-Tailwind-install-01

▍ 如何客製樣式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      // 覆蓋樣式
      'gray-light': '#ffffff'
    },
    extend: {
      // 擴充樣式
      colors: {
        'gray-light': '#d3dce6'
      }
    }
  },
  plugins: []
}

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

1
2
3
4
5
6
7
8
9
10
11
12
// 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 還是要記得引入字體呦）*/
}

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

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

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

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

▍ 安裝 prettier-plugin-tailwindcss

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

  1. 終端機輸入指令安裝
1
npm install -D prettier prettier-plugin-tailwindcss
  1. 配置設定檔
    在專案根目錄下，新增一個名為 .prettierrc 的設定檔
1
2
3
4
// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

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

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

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

▍ 延伸閱讀

— 文章同步發佈於 Vocus