plugin-tailwind-cdn

Inject the Tailwind CSS v4 browser CDN into the React Editor editor iframe so utility classes work without build-time setup.

Quick start

npm i @reacteditor/plugin-tailwind-cdn

import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";

const tailwindCdn = createTailwindCdnPlugin();

export function Page() {
  return <Editor config={config} data={data} plugins={[tailwindCdn]} />;
}

The plugin injects:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

into the iframe's <head> the first time the iframe mounts. By default, every host <style type="text/tailwindcss"> is mirrored into the iframe and kept in sync so its @theme, @utility, and other Tailwind source directives are available to the iframe's compiler.

Args

| Param | Example | Type | Status | | ------------- | --------------------------------------------------------- | ------ | -------- | | src | https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected] | String | Optional | | css | @theme { --color-brand: red; } | String | Optional |

Optional args

src

Override the script URL, e.g. to pin a specific version. Defaults to https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.

css

Explicit Tailwind source CSS for the iframe compiler. When provided, this takes precedence over automatic host style mirroring. When omitted, the plugin reads and watches all host <style type="text/tailwindcss"> elements automatically.

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

Notes

• The CDN bundle is intended for prototyping. For production, build Tailwind into your rendered output instead of relying on the CDN.
• The plugin also injects the browser runtime into public <Render /> output.

License

MIT © The React Editor Contributors