Tailwind content in iframe

This example shows Tailwind CSS utility classes inside iframe mode: grids, cards, spacing, and colors. You can edit any block — including multi-column layouts built with grid classes.

Load Tailwind from the iframe head, then use utility classes directly in HTML or insert column layouts from the Layout addbar menu with presets mapped to Tailwind grid classes.

For long-form article typography with the prose plugin, see Tailwind Typography in iframe.

Code

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

const app = Redactor('#entry-iframe-tailwind', {
    css: '/assets/redactor/',
    content: [
        '<p class="mb-4">Two columns</p>',
        '<div class="grid grid-cols-2 gap-4 mb-6">',
        '<div class="bg-indigo-100 p-4 rounded-lg"><p>01</p></div>',
        '<div class="bg-indigo-100 p-4 rounded-lg"><p>02</p></div>',
        '</div>'
    ].join(''),
    custom: {
        js: {
            head: ['https://cdn.tailwindcss.com']
        }
    },
    layout: {
        grid: 'grid'
    },
    layouts: {
        __replace: true,
        'one-column': {
            title: 'One column',
            grid: 'grid mb-6',
            classname: 'bg-slate-100 p-4 rounded-lg',
            pattern: '100%'
        },
        'two-columns': {
            title: 'Two columns',
            grid: 'grid grid-cols-2 gap-4 mb-6',
            classname: 'bg-indigo-100 p-4 rounded-lg',
            pattern: '50%|50%'
        },
        'three-columns': {
            title: 'Three columns',
            grid: 'grid grid-cols-3 gap-4 mb-6',
            classname: 'bg-emerald-100 p-4 rounded-lg',
            pattern: '33%|33%|33%'
        },
        'four-columns': {
            title: 'Four columns',
            grid: 'grid grid-cols-4 gap-4 mb-6',
            classname: 'bg-pink-100 p-4 rounded-lg',
            pattern: '25%|25%|25%|25%'
        }
    }
});

layout.grid sets the default wrapper class for layout blocks. Each preset can override the wrapper with grid and set column classes with classname.