Installation
Chlorophyllをプロジェクトに導入する方法
パッケージのインストール
Chlorophyllをインストールしてください。
pnpm add @morinoparty/chlorophyllPanda CSSの設定
ChlorophyllはPanda CSSを使用しています。プロジェクトにPanda CSSがまだ設定されていない場合は、Panda CSS公式ガイドを参照してください。
panda.config.tsにChlorophyllのプリセットを追加します。
import { defineConfig } from '@pandacss/dev';
import { chlorophyllPreset } from '@morinoparty/chlorophyll/preset';
export default defineConfig({
preflight: true,
presets: ['@pandacss/preset-base', chlorophyllPreset],
include: ['./src/**/*.{js,jsx,ts,tsx}'],
outdir: 'styled-system',
});CSSの生成
設定が完了したら、Panda CSSを実行してスタイルを生成します。
pnpm panda codegen次のステップ
インストールが完了したら、Quick Startでコンポーネントの使い方を学びましょう。