tailwindCdnPlugin

Inject the Tailwind CSS browser CDN into the editor’s preview iframe so utility classes work without a build step. Host <style type="text/tailwindcss"> elements are mirrored into the iframe automatically and kept in sync.

npm i @reacteditor/plugin-tailwind-cdn --save

pnpm add @reacteditor/plugin-tailwind-cdn

yarn add @reacteditor/plugin-tailwind-cdn

bun add @reacteditor/plugin-tailwind-cdn

import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
 
const tailwindCdn = createTailwindCdnPlugin();
 
export function Editor() {
  return <Editor plugins={[tailwindCdn]} />;
}

Options

src

Override the CDN URL. Defaults to https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.

const tailwindCdn = createTailwindCdnPlugin({
  src: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
});

Host source mirroring

With no css option, Tailwind source styles in the page hosting the editor are copied into the preview iframe in document order:

<style type="text/tailwindcss">{`
  @theme {
    --color-brand: #2563eb;
  }
`}</style>

Adding, removing, or editing a host Tailwind source style updates the iframe source and triggers Tailwind’s browser compiler again.

css

Pass source CSS explicitly when the host does not expose a <style type="text/tailwindcss">. This option takes precedence over automatic host mirroring.

const tailwindCdn = createTailwindCdnPlugin({
  css: `@theme { --color-brand: #2563eb; }`,
});

The value must be Tailwind source CSS, not compiled output. Bare npm imports that the Tailwind browser build cannot resolve are unsupported.