Wie man GrapesJS mit Tailwind CSS verwendet (vollständiger Leitfaden 2026)

Das Einzige, was man zuerst wissen sollte

Die GrapesJS-Leinwand ist ein iframe mit eigenem Dokument. Beladung Tailwind auf der Host-Seite tut nichts für die Leinwand – Utility-Klassen tun das nicht rendern, bis Tailwind in der Leinwand geladen wird. GrapesJS gibt dir canvas.styles Und canvas.scripts genau dafür.

1. Tailwind in die Leinwand laden (Entwicklung)

Das Tailwind Play CDN ist die schnellste Möglichkeit, Klassen live rendern zu sehen in der Herausgeber:

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. Verwendung eines erstellten Stylesheets (Produktion)

Für die Produktion baue Tailwind als echte CSS-Datei und übergebe deren URL canvas.styles Also werden nur die Klassen, die du verwendest, ausgeliefert:

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

Achte darauf, dass deine Tailwind-Klumpen content überall dort sind, wo du deinen Block hast HTML lebt, sodass die von Blöcken verwendeten Klassen nicht gelöscht werden.

3. Hinzufügen von Rückenwindblöcken

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. HTML im Stil von Tailwind exportieren

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.

Häufige Fallstricke

Zwei Dinge fangen alle auf. Erstens ist die Leinwand ein iframe mit eigenem Dokument – das Laden von Tailwind auf der Host-Seite bewirkt nichts; Es muss in oder canvas.styles canvas.scripts. Zweitens, Säuberung: In einem Serien-Tailwind-Build wird jede Klasse, die nur in Blockstrings (nicht in den Quellcode-Dateien) erscheint, entfernt, es sei denn, deine content Blobs beinhalten die Plätze, an denen diese Blöcke leben, sodass Helden-/Sektionsklassen lautlos verschwinden. Das Play CDN ist nur für die Entwicklung gedacht – es wird ein fertiges Stylesheet in der Produktion ausgeliefert. Und denken Sie daran, exportiertes HTML behält seine Utility-Klassen, also servieren Sie es zusammen mit demselben gebauten Tailwind-CSS.

Voraussetzungen

Du brauchst ein GrapesJS-Setup und einen Tailwind-Workflow (das Play-CDN für die Entwicklung oder ein erstelltes Stylesheet für die Produktion). Die eine Regel, die man sich merken sollte: Die GrapesJS-Leinwand ist ein iframe, also muss Tailwind darin geladen werden, nicht nur auf der Host-Seite.

Füge Tailwind-ähnliche Blöcke hinzu

Registerblöcke, deren Inhalt Tailwind-Utility-Klassen verwendet, sodass sie stilisiert auf der Leinwand gerendert werden:

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>`,
});

Produktion: Tailwind für die Leinwand bauen

In der Produktion ersetzen Sie das Play-CDN durch ein erstelltes Stylesheet, das eingereicht wird canvas.styles, und achte darauf, dass dein Tailwind content klumpt Fügen Sie überall ein, wo sich Ihr Block-HTML befindet – ansonsten sind die Klassen, die Ihre Blöcke verwenden, gereinigt und Abschnitte unstiliert:

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

Aufführungstipps

Ein gesäubertes, gebautes Tailwind-Stylesheet in Produktion ausliefern, statt Play CDN, also Die Leinwand lädt nur die Klassen, die du tatsächlich benutzt. Exportiertes HTML behält seine Nützlichkeit Klassen, also serviere es zusammen mit demselben gebauten CSS – keine Duplikationen pro Seite.

Fehlerbehebung häufiger Fehler

Klassen werden im Editor nicht gerendert , was bedeutet, dass Tailwind nicht geladen wird Innerhalb des Leinwand-iframes – fügen Sie es über canvas.styles oder hinzu canvas.scripts. Die Blöcke wirken in der Produktion ungestylt, aber in Ordnung Dev meint, Purge hat ihre Klassen entfernt; Breitere die content Kugeln. Die Änderungen der Host-Benutzeroberfläche führen unerwartet dazu, dass du Tailwind auf der Seite statt (oder sowie) die Leinwand.

Wann man Tailwind mit GrapesJS verwenden sollte

Tailwind passt gut zu GrapesJS, wenn dein Design-System auf Utility-First basiert und du Ich möchte, dass exportierte Seiten exakt zur Produktion passen. Wenn dein Projekt ein Komponenten-CSS verwendet Stattdessen lädt man das auf die Leinwand auf die gleiche Weise – der iframe-Ansatz ist identisch.

Nächste Schritte

Siehe die zugehörigen GrapesJS + React und GrapesJS + Vite-Anleitungen , durchstöbern Blockbibliotheks-Plugins und die GrapesJS-Marktplatz oder starte mit dem GJS.Market-Startseite.

FAQ

Warum werden Tailwind-Klassen nicht in GrapesJS gerendert?

Die Leinwand ist ein iframe mit eigenem Dokument, daher muss Tailwind darin geladen werden Die Leinwand über canvas.styles oder canvas.scripts.

Wie lade ich Tailwind in die Leinwand?

Entwickler: Füge das Play-CDN zu canvas.scripts. hinzu. Produktion: Bau eines Tailwind Stylesheet und übergebe seine URL in canvas.styles.

Behält exportiertes HTML die Tailwind-Klassen?

Ja — editor.getHtml() gibt Aufschlag mit seinen Utility-Klassen zurück unversehrt; Bediene es mit deinem gebauten Tailwind CSS.