【Panda CSS】Vite で Panda CSS を使ってみた

はじめに

この記事では、Vite 環境で Panda CSS を利用する手順を記載します。

開発環境

開発環境は以下の通りです。

• Windows 11
• React 18.3.1
• TypeScript 5.5.2
• Vite 6.0.3
• Panda CSS 0.49.0
• npm 10.9.0
• Node.js 22.11.0

Vite プロジェクトファイルの作成

以下のコマンドでプロジェクトファイルを作成します。

npm create vite@latest panda-css-vite -- --template react-ts

プロジェクトファイルが作成されたら以下のコマンドを実行して、ローカルサーバーを起動します。

cd panda-css-vite
npm install
npm run dev

ローカルサーバー起動後、ターミナルに表示される URL へアクセスすると、以下の画面が表示されます。

Panda CSS のインストール

以下のコマンドで Panda CSS をインストールします。

npm install -D @pandacss/dev

設定ファイルの追加

以下のコマンドで Panda CSS の設定ファイルを作成します。

npx panda init --postcss

コマンドが実行されると panda.config.ts と postcss.config.cjs の2ファイル作成されます。

各ファイルの中身は以下の通りです。

panda.config.ts

import { defineConfig } from "@pandacss/dev";

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",
});

postcss.config.cjs

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
  },
}

package.json の更新

package.json の scripts に panda codegen を実行するスクリプトを追加します。

package.json

  ...,
  "scripts": {
    "prepare": "panda codegen",
    ...,
  },
  ...

この手順により依存関係をインストールする度に Panda の出力ディレクトリが再作成されます。そのため、.gitignore に styled-system が自動で追加されていますが、気にする必要はありません。

CSS ルートファイルの設定

CSS のルートファイルに以下のコードを追加します。

src/index.css

@layer reset, base, tokens, recipes, utilities;

Panda CSS を利用して実装する

src/App.tsx

import { css } from '../styled-system/css';
 
function App() {
  return (
    <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>
  )
}
 
export default App;

ローカルサーバーを再起動して、動作確認をします。
Panda CSS が適用された「Hello 🐼!」が表示されます。

CSS の変更が反映されることも確認できます。

src/App.tsx

import { css } from "../styled-system/css";

function App() {
  return (
    <div className={css({ fontSize: "8xl", fontWeight: "bold" })}>
      Hello 🐼!
    </div>
  );
}

export default App;

参考

• Using Panda CSS with Vite