Cómo usar GrapesJS con Tailwind CSS (guía completa 2026)

Lo primero que hay que saber

El lienzo GrapesJS es un iframe con su propio documento. Carga Tailwind en la página anfitriona no aporta nada al lienzo — las clases de utilidad no lo harán renderiza hasta que Viento de Cola esté cargado dentro del lienzo. GrapesJS te da canvas.styles Y canvas.scripts precisamente por esto.

1. Cargar Viento de Cola en el lienzo (desarrollo)

El CDN Tailwind Play es la forma más rápida de ver las clases renderizadas en directo en el Editor:

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: false,
  canvas: {
    // Injected into the canvas iframe, not the host page.
    scripts: ['https://cdn.tailwindcss.com'],
  },
});

2. Utilizar una hoja de estilo construida (producción)

Para producción, compila Tailwind en un archivo CSS real y pasa su URL canvas.styles Así que solo se entregan las clases que usas:

canvas: {
  styles: ['/assets/tailwind.css'],
}

Asegúrate de que los globos de viento content de cola estén en el lugar donde tu bloque HTML existe, así que las clases que usan los bloques no se eliminan.

3. Añadir bloques de viento de cola

editor.BlockManager.add('tw-hero', {
  label: 'Hero',
  content: `
    <section class="bg-slate-900 text-white py-20 text-center">
      <h1 class="text-4xl font-bold">Headline</h1>
      <p class="mt-4 text-slate-300">Supporting copy</p>
    </section>`,
});

4. Exportar HTML al estilo Tailwind

const html = editor.getHtml();   // markup keeps its Tailwind classes
const css = editor.getCss();     // GrapesJS-managed styles, if any
// Serve `html` alongside your built Tailwind CSS.

Trampas comunes

Dos cosas atrapan a todos. Primero, el lienzo es un iframe con su propio documento — cargar Tailwind en la página anfitriona no hace nada; debe ir en canvas.styles o canvas.scripts. Segundo, purga: en una build de producción de Tailwind, cualquier clase que solo aparezca en cadenas de bloques (no tus archivos fuente) se elimina a menos que tus content globos incluyan donde están esos bloques, así que las clases de héroe/sección desaparecen silenciosamente. El Play CDN es solo para desarrollo — enviar una hoja de estilo construida en producción. Y recuerda que el HTML exportado mantiene sus clases de utilidad, así que sírvelo junto con ese mismo CSS Tailwind construido.

Requisitos previos

Necesitarás una configuración GrapesJS y un flujo de trabajo Tailwind (el Play CDN para desarrollo o una hoja de estilo construida para producción). La única regla a recordar: el lienzo de GrapesJS es un iframe, así que Tailwind debe cargarse dentro de él, no solo en la página anfitriona.

Añadir bloques al estilo Tailwind

Bloques de registro cuyo contenido utiliza clases utilitarias Tailwind para que se rendericen con estilo en el lienzo:

editor.BlockManager.add('tw-hero', {
  label: 'Hero',
  category: 'Sections',
  content: `
    <section class="bg-slate-900 text-white py-20 text-center">
      <h1 class="text-4xl font-bold">Headline</h1>
      <p class="mt-4 text-slate-300">Supporting copy</p>
    </section>`,
});

Producción: construye Tailwind para el lienzo

En producción, sustituye el Play CDN por una hoja de estilo integrada que se ha instalado canvas.styles, y asegúrate de que tus grumos de viento de cola content incluye donde esté el HTML de tu bloque — de lo contrario, las clases que usan tus bloques son Purgado y las secciones se renderizan sin estilo:

// tailwind.config.js
content: ['./src/**/*.{html,js,ts}', './src/blocks/**/*.js'],
// grapesjs.init
canvas: { styles: ['/assets/tailwind.css'] }

Consejos de rendimiento

Envía una hoja de estilo Tailwind purgada y construida en producción en lugar del Play CDN, así que El lienzo solo carga las clases que realmente usas. El HTML exportado mantiene su utilidad así que sirve junto a ese mismo CSS construido — sin duplicación de estilo por página.

Resolución de errores comunes

Las clases no se renderizan en el editor , lo que significa que Tailwind no está cargado Dentro del marco de lienzo — añádelo mediante canvas.styles o canvas.scripts. Los bloques parecen sin estilo en producción, pero bien en Dev significa que Purge eliminó sus clases; Ensancha los content globos. Los cambios inesperados en la interfaz del host significan que cargaste Tailwind en el página en lugar de (o tan bien como) el lienzo.

Cuándo usar Tailwind con GrapesJS

Tailwind combina bien con GrapesJS cuando tu sistema de diseño es la utilidad y tú Quiero que las páginas exportadas coincidan exactamente con la producción. Si tu proyecto utiliza un CSS de componentes Framework, en cambio, carga eso en el lienzo de la misma manera — el enfoque iframe es idéntica.

Próximos pasos

Véase el GrapesJS + React y Guías GrapesJS + Vite , navega plugins de biblioteca de bloques y el Mercado GrapesJS, o empieza desde el GJS. Página principal del mercado.

Preguntas frecuentes

¿Por qué las clases de Tailwind no se renderizan en GrapesJS?

El lienzo es un iframe con su propio documento, así que Tailwind debe cargarse dentro el lienzo mediante canvas.styles o canvas.scripts.

¿Cómo cargo Viento de Cola en el lienzo?

Desarrollador: añadir el Play CDN a canvas.scripts. Producción: construye un Viento de Cola hoja de estilo y pasar su URL en canvas.styles.

¿El HTML exportado mantiene las clases de Tailwind?

Sí — editor.getHtml() devuelve el marcado con sus clases de utilidad intacto; Sírvelo con tu CSS Tailwind incorporado.