Panda CSS

Use PandaCSS in Format Studio documents.

Supported frameworks

Framework	Supported
React
Vue
HTML

Installation

Install the Panda package

npm install @pandacss/dev --save-dev

pnpm add @pandacss/dev --save-dev

yarn add @pandacss/dev --dev

bun add @pandacss/dev --dev

Add the prepare script to your package.json

package.json

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

Create a panda.config.ts file in the root of your repo or package

panda.config.ts

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
	include: ['./documents/**/*.{js,jsx,ts,tsx,vue}'],
	outdir: './styles/styled-system'
})

Enable Panda in your Format configuration file

format.config.json

{
	"framework": "react",
	"pandaCss": {
		"enabled": true
	}
}

Usage

Add the Panda layer setup to your main stylesheet then import it into your document entry point. This import only needs to be done once, in the entry file. Additionally import the generated Panda utilities wherever you need them.

styles/styles.css

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

documents/invoice/index.tsx

import { Document, Layout } from '@format.dev/react'
import { css } from '../../styles/styled-system/css'
import '../../styles/styles.css'

const styles = css({
	backgroundColor: 'peachpuff',
})

export default function Invoice () {
	return (
		<Document title="Invoice">
			<Layout id="invoice" width={793.71} height={1122.52}>
				<div className={styles}>Hey, 🍑</div>
			</Layout>
		</Document>
	)
}

[TODO: Test Vue]

documents/invoice/index.vue

<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
import { css } from '../../styles/styled-system/css'
import '../../styles/styles.css'

const styles = css({
	backgroundColor: 'peachpuff',
})
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div :class="styles">Hey, 🍑</div>
		</Layout>
	</Document>
</template>

[TODO: Test this flow]

Non-standard Panda config path

If panda.config.ts is not at your project root, set pandaCss.postCssConfig.

format.config.json

{
	"framework": "react",
	"pandaCss": {
		"enabled": true,
		"postCssConfig": {
			"cwd": "./config",
			"configPath": "./config/panda.config.ts"
		}
	}
}

Was this page helpful?