GrapesJS TailwindCSS Plugin

The GrapesJS TailwindCSS Plugin seamlessly integrates Tailwind CSS 4 with GrapesJS, enabling you to leverage a modern CSS framework directly within your page builder. With on-the-fly CSS building, this plugin provides up-to-date styles and exports the compiled CSS with your project.

Key Features:

- Tailwind CSS 4 Integration: Utilize the latest version of Tailwind CSS.
- Dynamic CSS Build: Automatically compiles Tailwind CSS based on your project's classes.
- Export Ready: The compiled CSS is appended to your export, ensuring consistency.
- Multi Page Support: The plugin makes use of the PageManager

DEMO

:star: Star me on GitHub — it motivates me a lot!

Installation

$3

html

$3

sh

npm i grapesjs-tailwindcss-plugin

$3

sh

git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git





Usage



$3

html

  href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"

  rel="stylesheet"

/>

$3

js

import grapesjs from "grapesjs";

import plugin from "grapesjs-tailwindcss-plugin";

import "grapesjs/dist/css/grapes.min.css";



const editor = grapesjs.init({

  container: "#gjs",

  // ... other configurations

  plugins: [plugin],

  pluginsOpts: {

    [plugin]: {

      // Options like autobuild, toolbarPanel, notificationCallback, buildButton, etc.

    },

  },

  // Alternatively:

  // plugins: [

  //   editor => plugin(editor, { / options / }),

  // ],

});





Summary



- Plugin name:

grapesjs-tailwindcss-plugin



- Commands:

build-tailwind



- Button:

build-tailwind-button





Options



| Option | Description | Type | Default |

| --- | --- | --- | --- |

|

prefix | Prefix to use for Tailwind CSS classes. Helps differentiate Tailwind classes from others. | string or null |null

 |

|

autobuild | If true, the plugin automatically rebuilds Tailwind CSS on each update. Set to false for manual builds. | boolean | true

 |

|

autocomplete | Controls the behavior of the autocomplete feature that provides Tailwind class name suggestions. If set to false, autocomplete is disabled. If set to true (default), autocomplete is enabled and will use the default selector #gjs-clm-new. If set to a string, that string will be used as a custom selector for the autocomplete. | boolean or string | true

 |

|

customCss | The URL of a CSS file or a raw CSS string that will be appended immediately after the @import 'tailwindcss'; statement. This allows you to extend Tailwind's styles dynamically. See the Tailwind docs for more details. | string | ""

 |

|

buildButton | Option to add a manual build button to the toolbar for triggering the CSS build process. | boolean | false

|

|

toolbarPanel | Specify the panel where the build button should be added (e.g., options). | string | options

 |

|

notificationCallback | A custom callback function to handle notifications when Tailwind CSS is compiled. | function | () => void

 |



Development



Clone the repository

sh

$ git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git

$ cd grapesjs-tailwindcss-plugin





Install dependencies

sh

$ npm i





Start the dev server

sh

$ npm start





Build the source

sh

$ npm run build

License