Styling
Set up Tailwind so the built-in components and RichText render styled, and define the theme CSS variables.
The built-in components are styled with Tailwind classes. Your Tailwind build has to scan the plugin's package so those classes end up in your CSS, and the RichText component needs the typography plugin.
Package scanning
Required if your project uses Tailwind CSS. It makes sure the component classes are included in your build.
/* Adjust the path relative to your CSS file */
@source "../node_modules/@delmaredigital/payload-puck";Tailwind Typography
Required only if you use the RichText component, which uses @tailwindcss/typography.
npm i @tailwindcss/typography@import "tailwindcss";
@plugin "@tailwindcss/typography";Theme CSS variables
The components use shadcn/ui-style CSS variables. If you already use shadcn/ui, they exist. If not, and you want to customise colours, define them in your CSS:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}The starter files include a complete puck-theme.css with light and dark values, and the Tailwind v4 @theme inline block that maps these variables to colour utilities.
The editor canvas
The editor renders your components inside an iframe that doesn't see your page's CSS. Point it at your built stylesheet with editorStylesheets; see Editor stylesheet.