react-serverでtailwindcssが動かなかった

追記

PR出したのでもうドキュメント通り動くはずです
https://github.com/lazarv/react-server/pull/172#event-16721617773

はじめに

react-serverの検証をしてる際にドキュメント通りやってtailwindが動かなかったので対処法を取り急ぎ書きます。PR出して修正するかもですが

バージョン4の場合

1. vite.config.jsを修正

vite.config.js

import { defineConfig } from "vite";
// import tailwindcss from "tailwindcss";
import tailwindcss from "@tailwindcss/vite"; // ←これにする

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

2. App.jsxとmain.jsxにimport React from 'react'を入れる

インポートしないとコンソールで怒られます

edit:
そもそもviteセットアップするドキュメントではreactをアンインストールしてるから、必要ないかも(?)→必要なさそうでした。

バージョン3の場合

サーバ立ち上げた際に以下のエラーが出ます(実際はもっと長いですが)

It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

GPT曰く
エラーの原因は postcss.config.jsがESモジュール(type: "module")に対応していないためです。package.jsonに "type": "module"が含まれていると、Node.jsはすべての.jsファイルをESモジュールとして扱います。しかしpostcss.config.jsはCommonJS形式である必要があります

postcss.config.jsの拡張子をjsからcjsにする

これでCommonJSとして認識されるようです

'module' is not definedが出る場合

postcss.config.jsやtailwind.config.jsで'module' is not definedが出る場合、export defaultにすると

おわりに

とりあえずこれで動きました