Remix SPAモードでTailwind CSSを使うときの注意点

意外と情報が少なく、Remix SPAモードでTailwind CSSを動かすまでに苦労したので記事に残しました📝

※ページの最後に追記しました！（2024-03-13）

重要なところ

• ViteとRemixのインストールガイドを組み合わせる必要がある
  • Install Tailwind CSS with Vite - Tailwind CSS
  • Install Tailwind CSS with Remix - Tailwind CSS
• npx tailwindcss init --ts -pをする
• root.tsxでimportする
  • ファイルをそのままimportする（例：import "./tailwind.css";）
• tailwind.config.tsのcontentをRemix SPA用に少し変える

手順

1. npm install -D tailwindcss postcss autoprefixer
   • postcssとautoprefixerも必要になります
2. npx tailwindcss init --ts -p
   • これでTailwindのconfigファイルをTypeScriptで生成しつつ、postcss.config.jsも生成されます。
3. tailwind.config.tsをRemix用にカスタマイズします。
   • content: ["./app/**/*.{js,jsx,ts,tsx}"],にします
4. tailwind.cssを作成します
5. CSSファイルをroot.tsxでimportします
   • import "./tailwind.css";のようにそのままimportするだけでOKです
   • ここが一番詰まったポイントでした

これでTailwind CSSが使えるようになります

コード例

こちらのPull Requestをご参考ください。

github.com

Make Tailwind CSS work in Remix SPA (stable) by lef237 · Pull Request #4 · lef237/lef237.github.io

追記（2024-03-13）

投稿後に気づいたのですが、Coji Mizoguchiさんが自分よりも先に記事にまとめてくださっていました。ありがとうございます！🙏

zenn.dev

Remix SPA Mode に TailwindCSS を入れて Cloudflare Pages にデプロイするスピードラン