Vanilla Extract

Use Vanilla Extract for type-safe static CSS in Format Studio documents.

Supported frameworks

Framework	Supported
React
Vue
HTML

Installation

Install the Vanilla Extract package.

npm install @vanilla-extract/css --save-dev

pnpm add @vanilla-extract/css --save-dev

yarn add @vanilla-extract/css --dev

bun add @vanilla-extract/css --dev

Usage

documents

invoice

styles.css.ts

index.tsx

documents/invoice/styles.css.ts

import { style } from '@vanilla-extract/css'

export const peach = style({
	background: 'peachpuff'
})

documents/invoice/index.tsx

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

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

Was this page helpful?