सबसे पहले जानने वाली एक बात
GrapesJS कैनवास अपने स्वयं के दस्तावेज़ के साथ एक iframe है। लोड हो रहा है
होस्ट पेज पर Tailwind कैनवास के लिए कुछ नहीं करता है - उपयोगिता कक्षाएं नहीं होंगी
रेंडर तब तक करें जब तक Tailwind कैनवास के अंदर लोड न हो जाए। GrapesJS आपको देता है
canvas.styles और canvas.scripts बिल्कुल इसी के लिए।
1. Tailwind को कैनवास में लोड करें (विकास)
Tailwind प्ले सीडीएन कक्षाओं को लाइव रेंडर देखने का सबसे तेज़ तरीका है संपादक:
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. एक निर्मित स्टाइलशीट (उत्पादन) का उपयोग करें
उत्पादन के लिए, एक वास्तविक सीएसएस फ़ाइल के लिए Tailwind बनाएं और इसका यूआरएल पास करें
canvas.styles इसलिए केवल आपके द्वारा उपयोग की जाने वाली कक्षाएं ही भेज दी जाती हैं:
canvas: {
styles: ['/assets/tailwind.css'],
}सुनिश्चित करें कि आपके Tailwind content ग्लोब में आपका ब्लॉक शामिल है
HTML रहता है, इसलिए ब्लॉकों द्वारा उपयोग की जाने वाली कक्षाओं को शुद्ध नहीं किया जाता है।
3. Tailwind ब्लॉक जोड़ें
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. निर्यात Tailwind-स्टाइल HTML
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.सामान्य नुकसान
दो चीजें हर किसी को पकड़ती हैं। सबसे पहले, कैनवास अपने स्वयं के दस्तावेज़ के साथ एक iframe है - होस्ट पृष्ठ पर Tailwind लोड करने से कुछ भी नहीं होता है; इसे अंदर canvas.styles जाना चाहिए या . canvas.scriptsदूसरा, शुद्धीकरण: एक उत्पादन Tailwind निर्माण में, कोई भी वर्ग जो केवल ब्लॉक स्ट्रिंग्स (आपकी स्रोत फ़ाइलों में नहीं) में दिखाई देता है, तब तक छीन लिया जाता है जब तक कि आपके content ग्लोब में वे ब्लॉक शामिल नहीं होते हैं, इसलिए नायक/अनुभाग कक्षाएं चुपचाप गायब हो जाती हैं। प्ले सीडीएन केवल विकास के लिए है - उत्पादन में एक निर्मित स्टाइलशीट शिप करें। और याद रखें कि निर्यात किया गया HTML अपनी उपयोगिता कक्षाएं रखता है, इसलिए इसे उसी निर्मित Tailwind सीएसएस के साथ परोसें।
आवश्यक शर्तें
आपको एक GrapesJS सेटअप और एक Tailwind वर्कफ़्लो की आवश्यकता होगी (विकास के लिए प्ले सीडीएन या उत्पादन के लिए एक निर्मित स्टाइलशीट)। याद रखने योग्य एक नियम: GrapesJS कैनवास है एक iframe, इसलिए Tailwind इसके अंदर लोड किया जाना चाहिए, न कि केवल होस्ट पेज पर।
Tailwind-स्टाइल वाले ब्लॉक जोड़ें
उन ब्लॉकों को पंजीकृत करें जिनकी सामग्री Tailwind उपयोगिता वर्गों का उपयोग करती है ताकि वे कैनवास पर स्टाइल प्रस्तुत करें:
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>`,
});उत्पादन: कैनवास के लिए Tailwind बनाएं
उत्पादन में, Play CDN को पास किए गए बिल्ट स्टाइलशीट से बदलें
canvas.styles, और सुनिश्चित करें कि आपका Tailwind content ग्लोब हो
जहां भी आपका ब्लॉक HTML रहता है, उसे शामिल करें - अन्यथा आपके ब्लॉक जिन वर्गों का उपयोग करते हैं वे हैं
शुद्ध और अनुभाग अव्यवस्थित प्रस्तुत करते हैं:
// tailwind.config.js
content: ['./src/**/*.{html,js,ts}', './src/blocks/**/*.js'],
// grapesjs.init
canvas: { styles: ['/assets/tailwind.css'] }प्रदर्शन युक्तियाँ
प्ले सीडीएन के बजाय उत्पादन में एक शुद्ध, निर्मित Tailwind स्टाइलशीट शिप करें, इसलिए कैनवास केवल उन कक्षाओं को लोड करता है जिनका आप वास्तव में उपयोग करते हैं। निर्यात किया गया HTML अपनी उपयोगिता रखता है कक्षाएं, इसलिए इसे उसी निर्मित सीएसएस के साथ परोसें - कोई प्रति-पृष्ठ शैली दोहराव नहीं।
सामान्य त्रुटियों का समस्या निवारण
संपादक में कक्षाएं प्रस्तुत नहीं होती हैं इसका मतलब है कि Tailwind लोड नहीं किया गया है
कैनवास iframe के अंदर - इसे या के माध्यम से canvas.styles जोड़ें
canvas.scripts. ब्लॉक उत्पादन में अनस्टाइल दिखते हैं लेकिन ठीक हैं
देव का अर्थ है शुद्ध करने से उनकी कक्षाओं को हटा दिया गया; ग्लोब को content चौड़ा करें।
होस्ट UI में अप्रत्याशित रूप से परिवर्तन का अर्थ है कि आपने Tailwind लोड किया है
कैनवास के बजाय (या साथ ही) पृष्ठ।
GrapesJS के साथ Tailwind का उपयोग कब करें
Tailwind GrapesJS के साथ अच्छी तरह से जुड़ जाता है जब आपका डिज़ाइन सिस्टम उपयोगिता-पहले होता है और आप उत्पादन से सटीक मिलान करने के लिए निर्यात किए गए पृष्ठ चाहते हैं। यदि आपका प्रोजेक्ट किसी घटक सीएसएस का उपयोग करता है इसके बजाय, इसे कैनवास में उसी तरह लोड करें - iframe दृष्टिकोण है अभिन्न।
अगले चरण
संबंधित GrapesJS + React और देखें GrapesJS + Vite गाइड, ब्राउज़ करें ब्लॉक लाइब्रेरी प्लगइन्स और GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।
अक्सर पूछे जाने वाले प्रश्न
Tailwind कक्षाएं GrapesJS में प्रस्तुत क्यों नहीं होती हैं?
कैनवास अपने स्वयं के दस्तावेज़ के साथ एक iframe है, इसलिए Tailwind अंदर लोड किया जाना चाहिए
कैनवास के माध्यम से canvas.styles या .canvas.scripts
मैं Tailwind कैनवास में कैसे लोड करूं?
देव: प्ले सीडीएन canvas.scriptsजोड़ें। उत्पादन: एक Tailwind बनाएं
स्टाइलशीट और इसका URL canvas.stylesपास करें।
क्या निर्यात किया गया HTML Tailwind कक्षाओं को रखता है?
हाँ - editor.getHtml() अपने उपयोगिता वर्गों के साथ मार्कअप लौटाता है
सही-सलामत; इसे अपने निर्मित Tailwind सीएसएस के साथ परोसें।