Grapesjs Tailwind

Tailwind is a utility framework, not a block library, so pairing it with a visual builder normally means writing every component by hand. This plugin closes that gap by importing the complete Tailblocks set as GrapesJS blocks, building on the approach taken by Destack.

Commands

• get-tailwindCss — returns the compiled Tailwind CSS for the current page. By default it prints to the console; pass a callback to capture it for export or storage.
• open-update-theme — opens a modal for changing the Tailwind theme applied to the canvas.

Required setup

Two things must be in place. First, the plugin depends on grapesjs-plugin-forms, so install that alongside it. Second — and this is the step that silently breaks styling when skipped — Tailwind class names contain slashes, as in w-1/2, which the GrapesJS Selector Manager does not preserve by default. Pass a custom escapeName function in selectorManager that keeps them intact.

Options

tailwindPlayCdn sets the CDN the Tailwind runtime is fetched from, and tailwindPlugins takes an array of first-party Tailwind plugins to include.

Good to know

Marked work-in-progress by its author. Install as grapesjs-tailwind.