Farm + React + Tailwind CSS V4 でハマった件について
はじめに
最近、高速なビルドツールとして注目を集めているFarmと、定番のReact、みんな大好きTailwind CSSを組み合わせ、プロジェクトを作ってみました。
いつも通り環境構築しているとTailwind CSS V4の導入で予想以上にハマってしまいました。同じような環境で開発を始めようとしている方の参考になれば幸いです。
使用した技術スタック
- Bun
- Farm
- React
- Tailwind CSS(V4)
何にハマったのか？
Tailwind CSS V3からV4への大きな変更
Tailwind CSS V3とV4で導入方法が大幅に変更されました。具体的には以下の点が変わっています。
- 設定ファイルの書き方が変更
- インストール方法の変更
- ビルドプロセスとの統合方法が変更
最初に遭遇した問題
Tailwind の初期設定コマンドを実行すると、
bun add -D tailwindcss
bunx tailwindcss init -p
怒られました。
error: could not determine executable to run for package tailwindcss
V3とV4の導入方法が違う
今までは、先程の初期設定コマンドを実行することでルートフォルダの中に tailwind.config.js が作成されましたが、V4ではそもそも tailwind.config.js が必要なくなりました。
公式の導入手順を実施する
- 公式の手順
今回ビルドツールはFarmを利用するためUsing PostCSSの手順で進めます。
導入
- ライブラリをインストールする
bun add -D tailwindcss @tailwindcss/postcss postcss
- PostCSSの設定
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}
- index.cssの修正
+ @import "tailwindcss";
- 開発サーバ起動
bun run dev
確認
**Farm + React**の文字を赤色にしてみます。
import { useState } from 'react';
import './main.css';
import reactLogo from './assets/react.svg';
import FarmLogo from './assets/logo.png';
export function Main() {
const [count, setCount] = useState(0);
return (
<>
<div>
<a href="https://farmfe.org/" target="_blank">
<img src={FarmLogo} className="logo" alt="Farm logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
- <h1>Farm + React</h1>
+ <h1 className="text-red-500">Farm + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/main.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Farm and React logos to learn more
</p>
</>
);
}
効いてへんなぁ…
原因
tailwind.config.jsを手動で作ったり、viteの導入方法を試してみたりとしばらく格闘してたどり着いた結果。
- FramのプラグインでPostCSSを使えるようにする必要があった
Farmのことを普通に忘れていました。
対応方法
- 依存関係のインストール
bun add -D @farmfe/js-plugin-postcss
- postcss.config.mjs 修正
import { defineConfig } from '@farmfe/core';
import farmPluginPostcss from "@farmfe/js-plugin-postcss";
export default defineConfig({
plugins: [
'@farmfe/plugin-react',
+ farmPluginPostcss()
]
});
- 開発サーバ再起動
bun run dev
確認してみると…
無事効くようになりました！
まとめ
TailwindCSS V4 とかで調べてもV3の情報が出てきたり、ベータ版なのかV3と同様の設定でいけるとかよくわからない情報が多くありました。
とくに、Farmのようなまだ新しいビルドツールと、メジャーアップデートされたばかりのフレームワークの組み合わせは、情報が少なく試行錯誤が前提で動くほうが良いです。
また、Claude君に聞いてみてもV3の情報を提供してくるので役に立ちませんでした。やっぱり生成AIは新しい変更には全然対応できていないので、自力の調査力は必要だなと感じるばかりです。
参考リンク
2025年8月時点の情報に基づいています。最新の情報は各公式ドキュメントをご確認ください。
Discussion