Tailwind Typography in iframe

This example shows how to use the Tailwind CSS Typography plugin (@tailwindcss/typography) inside iframe mode. The prose class styles headings, paragraphs, lists, quotes, and code blocks for long-form content.

Edit the sample article to see how prose styles stay isolated inside the iframe.

Code

<div id="entry-iframe-tailwind-typography"></div>

const app = Redactor('#entry-iframe-tailwind-typography', {
    css: '/assets/redactor/',
    classname: 'prose prose-slate max-w-none',
    padding: '32px',
    content: [
        '<h1>Design systems and editorial content</h1>',
        '<p>Typography plugin styles long-form text: headings, links, lists, and quotes.</p>',
        '<h2>Why isolate styles in an iframe</h2>',
        '<p>Prose styles apply only inside the editor surface and do not affect the documentation page.</p>',
        '<ul><li>Consistent vertical rhythm</li><li>Readable line length</li><li>Styled blockquotes and code</li></ul>',
        '<blockquote><p>Good typography disappears while you read.</p></blockquote>'
    ].join(''),
    custom: {
        css: ['.prose { max-width: 65ch; margin: 0 auto; }'],
        js: {
            head: ['https://cdn.tailwindcss.com?plugins=typography']
        }
    }
});

Load Tailwind with the typography plugin into the iframe via custom.js.head, then add prose (and optional modifiers like prose-slate) to classname on the editable root.