💡
Remix SPAにTailwindcssを導入でエラーになる問題の解消方法
Remix SPAとTailwindcssを一緒に使おうとして、エラーになったところがあったので、その問題の解消方法について記しておきます。
前提として、下記でremixのSPAが動く状態にしてください。
npx create-remix@latest --template remix-run/remix/templates/spa
tailwindcssの導入
tailwindcssの公式の導入手順は下記（SPA版ではない普通のRemixだけど）
しかしSPA版では上記の通りやってもうまくいかない。
その通りにやったら下記エラーが出た。
Error: No route matches URL "/@tailwind%20base;@tailwind%20components;@tailwind%20utilities;"
問題の解消方法
root.tsxのimportのところで、下記のように app.css?url とするとうまくいく。
import styles from './styles/app.css?url';
import type { LinksFunction } from "@remix-run/node";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
];
これは、viteの機能で、指定されたリソースへのパブリックURLを返す仕組みらしい。
実はもっといい方法があったりするのだろうか。それともこれが最適解なのかな。
Discussion