Styling

The renderer ships with strong default styling and can be customized at multiple layers.

Tailwind Typography

For best results, enable Tailwind Typography and scan the package output:

1pnpm add @tailwindcss/typography2

1@import "tailwindcss";2@plugin "@tailwindcss/typography";34@source "../node_modules/@valkyrianlabs/payload-markdown/dist";5

Override order

1global → collection → scope (field/block) → direct component props2

Later layers win.

Styling surfaces

• className → applied to the rendered markdown element itself
• wrapperClassName → applied to the outer wrapper
• sectionClassName → applied to rendered section containers
• columnClassName → applied to generated cell containers inside grids

Example global config

1payloadMarkdown({2  config: {3    variant: 'blog',4    size: 'lg',5    enableGutter: true,6    fullBleedCode: true,7    mutedHeadings: true,89    className: '[& li::marker]:text-foreground/55',10    wrapperClassName: 'max-w-4xl',11    sectionClassName: 'bg-white/10 backdrop-blur-xl rounded-2xl p-6 my-10',12    columnClassName: 'gap-8 md:gap-12',1314    options: {15      theme: 'github-dark',16    },17  },18})19

Fully scoped config

1payloadMarkdown({2  config: {3    fields: {4      variant: 'blog',5      size: 'lg',6    },7    blocks: {8      variant: 'compact',9      size: 'md',10    },11  },12  collections: {13    posts: {14      config: {15        fields: {16          wrapperClassName: 'max-w-3xl',17        },18        blocks: {19          sectionClassName: 'border border-white/10 bg-white/5 rounded-2xl p-6',20        },21      },22    },23  },24})25