背景
2024年9月現在、create-remixでテンプレートを指定せずに初期化するとおまけでtailwindが付属してきます。tailwindも便利ですが、私の個人開発のプロジェクトではPanda CSSでスタイリングを行おうとしていました。
公式ドキュメントを見たり、「tailwind uninstall」などでググったりしてもうまく情報を得ることができず、試行錯誤することになったため、そのときの忘備録として残します。
templateの指定などより良い方法で解決できる場合教えていただければと思います。
前提環境
- pnpm 9.9.0
pnpm --version 9.9.0 - remix 2.11.2 (SSRモード)
cat package.json | grep @remix "@remix-run/node": "^2.11.2", "@remix-run/react": "^2.11.2", "@remix-run/serve": "^2.11.2", "@remix-run/dev": "^2.11.2", - Panda CSS 0.45.2
cat package.json | grep pandacss "@pandacss/dev": "^0.45.2",
手順
※基本的にPanda CSSの公式ドキュメントに乗取ってセットアップします。
-
create-remixでremixアプリケーションを初期化しますpnpm dlx create-remix@latest ./apps/frontend --no-git-init --yes -
@pandacss/devを追加します# cd apps/frontend pnpm install -D @pandacss/dev -
panda initを実行しますpnpm panda init --postcss -
package.jsonを編集し、prepareスクリプトを追加します"scripts": { + "prepare": "panda codegen", "build": "remix vite:build", "dev": "remix vite:dev", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "remix-serve ./build/server/index.js", "typecheck": "tsc" } -
panda.config.tsを編集し、jsxFrameworkの設定を追加しますexport default defineConfig({ // Whether to use css reset preflight: true, // Where to look for your css declarations include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"], // Files to exclude exclude: [], // Useful for theme customization theme: { extend: {}, }, // The output directory for your css system outdir: "styled-system", + jsxFramework: "react", }); -
pnpm prepareを実行します -
app/index.cssを追加します+ @layer reset, base, tokens, recipes, utilities; -
apps/frontend/app/root.tsxへcssファイルへのlinkを追加します
https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/c123acc78ea244973b48765ac94901117ded57c1 -
tsconfig.jsonを編集し、styled-systemへのパスのエイリアスを設定します"paths": { "~/*": ["./app/*"], + "@styled-system/*": [ + "./styled-system/*" + ] } -
panda.config.tsの includeの設定を以下の通り変更します- include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"], + include: ["./app/**/*.{ts,tsx,js,jsx}"], -
pnpm devでサーバーを起動し、ブラウザで http://localhost:5173 を開きます
- ここで、JSXでスタイリングされたボタンを追加します
https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/9b4703f93c7979cbe6f74a6af6e5516206bca687
ボタンの色を青色に指定しているのにも関わらず正しくスタイルが当たっていません - 一度
pnpm devのプロセスを止めます - tailwind関連の設定を削除します
https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/e3181d4bb3c2027cf191e9ed6317d1c5fbfb6265
※apps/frontend/postcss.config.jsを消し忘れないように注意してください - 再度
pnpm devでサーバーを起動し、ブラウザで http://localhost:5173 を開きます
今度はボタンのスタイルが正しく当たっていることが確認できました！
まとめ
postcss.config.cjs (Panda CSS生成) と postcss.config.js (tailwind生成) がバッティングしてしまってスタイリングがうまくいかないことに時間を溶かしてしまいまいました。他にお困りの方がいたら助けになれば幸いです。
なお今回の記事のセットアップ結果は以下のGitHubレポジトリに残していますので、適宜ご参照ください。
https://github.com/Tsutomu-Ikeda/remix-panda-css