Package Exports

grapesjs-tailwind-iconify
grapesjs-tailwind-iconify/dist/grapesjs-tailwind.esm.js
grapesjs-tailwind-iconify/dist/grapesjs-tailwind.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grapesjs-tailwind-iconify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Grapesjs Tailwind with custom block + Iconify

DEMO

Tailwind CSS integration for GrapesJS with Custom Components Manager and Iconify Icons support.

Key Features:

🎨 Complete Tailwind CSS integration with custom config support
🧩 Custom Component Manager for loading external blocks
🔥 Iconify integration with 150,000+ icons from 120+ icon sets
📦 Load components from CDN, JSON, or local sources
⚡ Built-in Tailblocks.cc components

Requires grapesjs-plugin-forms

🚀 Quick Start

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@sarbeh/grapesjs-tailwind-iconify"></script>

<div id="gjs"></div>

JS

// Handle tailwind's use of slashes in css names
const escapeName = (name) => `${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, '-');

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  selectorManager: { escapeName },
  plugins: ['@sarbeh/grapesjs-tailwind-iconify'],
  pluginsOpts: {
    '@sarbeh/grapesjs-tailwind-iconify': {
      // Load custom components from external sources
      customComponents: {
        enabled: true,
        cdnEndpoints: [
          'https://cdn.example.com/my-custom-blocks.js'
        ],
        jsonSources: [
          'https://api.example.com/blocks.json'
        ]
      }
    }
  }
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

.change-theme-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 5px;
}

.change-theme-button:focus {
  outline: none;
  box-shadow: 0 0 0 2pt #c5c5c575;
}

/* Make blocks full width */
.gjs-block {
    padding: 0 !important;
    width: 100% !important;
    min-height: auto !important;
}

/* Fit icons properly */
.gjs-block svg {
    width: 100%;
}

🧩 Custom Components Manager

Load custom blocks from external sources:

// Add components from CDN
editor.CustomComponents.loadFromURL('https://cdn.example.com/blocks.js');

// Add local component
editor.CustomComponents.addComponent({
  id: 'my-hero',
  label: 'Custom Hero',
  category: 'Headers',
  content: `<section class="bg-blue-500 text-white p-8">
    <h1 class="text-4xl font-bold">Hello World</h1>
  </section>`
});

// Export all components
const allComponents = editor.CustomComponents.exportComponents();

Component Format

{
  "id": "unique-component-id",
  "label": "Component Name",
  "category": "Category Name",
  "content": "<div class='tailwind-html'>Content</div>",
  "media": "data:image/svg+xml;base64,..." // Optional preview icon
}

🔥 Iconify Integration

Access 150,000+ icons from 120+ icon sets:

// Search icons
const icons = await editor.Iconify.searchIcons('arrow');

// Get specific icon SVG
const iconSVG = await editor.Iconify.getIconSVG('heroicons:arrow-right');

// Available icon sets
const iconSets = editor.Iconify.getIconSets();

🎛️ Plugin Options

Option	Description	Default
`tailwindPlayCdn`	Tailwind CSS CDN URL	`https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4`
`plugins`	Tailwind plugins array	`[]`
`config`	Custom Tailwind config	`{}`
`customComponents.enabled`	Enable custom components	`true`
`customComponents.cdnEndpoints`	CDN URLs for components	`[]`
`customComponents.jsonSources`	JSON sources for components	`[]`
`iconify.enabled`	Enable Iconify integration	`true`
`iconify.defaultIconSets`	Default icon sets to load	`['heroicons', 'lucide', 'tabler']`

📦 Commands

Command	Description
`get-tailwindCss`	Extract optimized Tailwind CSS
`open-update-theme`	Open theme customization modal

// Get optimized CSS
editor.runCommand('get-tailwindCss', {
  callback: (css) => console.log(css)
});

🌐 CDN Usage

<!-- Main plugin -->
<script src="https://unpkg.com/@sarbeh/grapesjs-tailwind-iconify"></script>

<!-- Or via JSDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@sarbeh/grapesjs-tailwind-iconify"></script>

<!-- Standalone Custom Component Manager -->
<script src="https://unpkg.com/@sarbeh/grapesjs-tailwind-iconify/dist/cdn/custom-component-manager.min.js"></script>

📥 Installation

# NPM
npm i @sarbeh/grapesjs-tailwind-iconify

# CDN
# See CDN usage above

🔧 Development

git clone https://github.com/herbras/grapesjs-tailwind.git
cd grapesjs-tailwind
npm install
npm start

📄 License

MIT License - see LICENSE file

Created by Ibrahim Nurul Huda - Sarbeh