RemixでPanda CSSを使うまでのセットアップ手順

## 背景

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の公式ドキュメント](https://panda-css.com/docs/installation/remix)に乗取ってセットアップします。

1. `create-remix` でremixアプリケーションを初期化します
    ```bash
    pnpm dlx create-remix@latest ./apps/frontend  --no-git-init --yes
    ```
1.  `@pandacss/dev` を追加します
    ```bash
    # cd apps/frontend
    pnpm install -D @pandacss/dev
    ```
1. `panda init` を実行します
    ```bash
    pnpm panda init --postcss
    ```
1. `package.json` を編集し、prepareスクリプトを追加します
    ```diff_json
      "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"
      }
    ```
1. `panda.config.ts` を編集し、jsxFrameworkの設定を追加します
    ```diff_typescript
      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",
      });
    ```
1. `pnpm prepare` を実行します
1. `app/index.css` を追加します
    ```diff_css
    + @layer reset, base, tokens, recipes, utilities;
    ```
1. `apps/frontend/app/root.tsx` へcssファイルへのlinkを追加します
    https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/c123acc78ea244973b48765ac94901117ded57c1
1. `tsconfig.json` を編集し、styled-systemへのパスのエイリアスを設定します
    ```diff_json
      "paths": {
          "~/*": ["./app/*"],
    +     "@styled-system/*": [
    +         "./styled-system/*"
    +     ]
      }
    ```
1. `panda.config.ts` の includeの設定を以下の通り変更します
    ```diff_typescript
    -   include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
    +   include: ["./app/**/*.{ts,tsx,js,jsx}"],
    ```
1. `pnpm dev` でサーバーを起動し、ブラウザで http://localhost:5173 を開きます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329945/6d9cf9c6-701f-288b-9c70-31e48d28404f.png)
1. ここで、JSXでスタイリングされたボタンを追加します
    https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/9b4703f93c7979cbe6f74a6af6e5516206bca687
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329945/f83634be-c84c-b4c1-bf35-e72ab2206593.png)
    ボタンの色を青色に指定しているのにも関わらず正しくスタイルが当たっていません
1. 一度 `pnpm dev` のプロセスを止めます
1. tailwind関連の設定を削除します
    https://github.com/Tsutomu-Ikeda/remix-panda-css/commit/e3181d4bb3c2027cf191e9ed6317d1c5fbfb6265
    ※ `apps/frontend/postcss.config.js` を消し忘れないように注意してください
1. 再度 `pnpm dev` でサーバーを起動し、ブラウザで http://localhost:5173 を開きます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329945/f945a5d1-92e7-0ceb-656e-3d465729d076.png)
    今度はボタンのスタイルが正しく当たっていることが確認できました！

## まとめ

`postcss.config.cjs` (Panda CSS生成) と `postcss.config.js` (tailwind生成) がバッティングしてしまってスタイリングがうまくいかないことに時間を溶かしてしまいまいました。他にお困りの方がいたら助けになれば幸いです。
なお今回の記事のセットアップ結果は以下のGitHubレポジトリに残していますので、適宜ご参照ください。
https://github.com/Tsutomu-Ikeda/remix-panda-css