Editor stylesheet
Give the Puck editor canvas your frontend's CSS with the editorStylesheets option.
The Puck editor renders your page components inside an iframe. That iframe has no access to your frontend's CSS (Tailwind utilities, CSS variables, fonts) unless you give it some. The editorStylesheets option takes an ordered list of stylesheet URLs for the iframe to load.
The plugin does not compile CSS. Your app's build already does that; you point the editor at the result. The same URLs resolve in development and production, so the editor can't look right locally and unstyled in production.
Since 0.10.2 the canvas also no longer inherits the admin page's CSS: it gets exactly your editorStylesheets and editorCss. If your preview relied on a stylesheet loaded into the admin page, list it here.
Build the stylesheet
Use Tailwind's own CLI as part of your build, so the editor loads byte-identical CSS in every environment. Tailwind v4 ships the CLI as a separate package (v3 already provides the tailwindcss binary):
npm i -D @tailwindcss/cliAdd scripts that build the file before Next.js does. Quote the paths: route groups like (frontend) are shell syntax.
{
"scripts": {
"build:puck-css": "tailwindcss -i './src/app/(frontend)/globals.css' -o './public/puck-editor-styles.css'",
"dev:puck-css": "tailwindcss -i './src/app/(frontend)/globals.css' -o './public/puck-editor-styles.css' --watch",
"build": "pnpm build:puck-css && next build",
"dev": "pnpm build:puck-css && next dev"
}
}Add public/puck-editor-styles.css to .gitignore; it is a build artifact. Run dev:puck-css in a second terminal while you edit theme CSS.
Point the plugin at it
createPuckPlugin({
pagesCollection: 'pages',
editorStylesheets: [
'/puck-editor-styles.css',
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
],
})Order matters: later sheets override earlier ones. The resolved URLs are published on config.custom.puck.editorStylesheets and passed to the editor automatically, so you don't repeat them on PuckConfigProvider.
Other ways to add CSS
PuckConfigProviderandPuckEditoraccepteditorStylesheetsandeditorCss(raw CSS, useful for CSS variables). Values passed toPuckEditortake precedence over the provider's.- A layout can carry its own
editorStylesheetsandeditorCss, merged with the provider's, for layout-specific styles.
Changed in 0.8.0
editorStylesheet, editorStylesheetCompiled and editorStylesheetUrls were replaced by the single editorStylesheets array. The /api/puck/styles endpoint and the withPuckCSS() wrapper (/next entry point) were removed. Production CSS used to come from a webpack plugin, and Next.js 16 defaults to Turbopack, which never runs webpack hooks, so that file was silently never generated. See the upgrade guide.