Panda CSS

• 参考

Install

bun

bun add -D @pandacss/dev
bun panda init --postcss

package.json

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

 outdirでstyled-systemの作成ディレクトリなど変更可能。

pnada.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',
})