This lesson covers how to configure each package in a monorepo to use a shared Panda preset, which serves as the source of truth for design tokens.
The first step is to install Panda css into all the packages using the command
pnpm add -w @pandacss/dev
.
pnpm init
to create a package.json
file.@mono/preset
and set main to src/index.ts
.src/index.ts
file . Within this file, use definePreset
to set up design tokens,
text styles, and layer styles.packages
called styled-system
.pnpm init
to create a package.json
file.@mono/styled-system
.pnpm panda init --outdir=dist
to generate the dist folder and
pnpm panda emit-pkg --base=dist
to update package.json."prepare": "panda codegen --clean"
and a dev script:
"dev": "panda codegen --watch"
.@mono/preset
to dependencies: "@mono/preset": "workspace:\*"
.Setup App Package
pnpm panda init --postcss --no-codegen
.Replace outdir
directory in panda.config
with importMap
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
preflight: true,
include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
exclude: [],
importMap: '@mono/styled-system',
})
This tells panda where the styled-system is coming from.
@mono/styled-system
as a dependency: "dependencies": {
"@mono/styled-system": "workspace:*"
},
Clean up app.tsx
and add some styled text to ensure setup works. Remember to import css
from
@mono/styled-system/css
.