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 me on GitHub — it motivates me a lot!

Installation

CDN

<script src="https://unpkg.com/grapesjs-tailwindcss-plugin"></script>

NPM

npm i grapesjs-tailwindcss-plugin

GIT

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

Usage

Directly in the Browser

<link
  href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-tailwindcss-plugin.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
    container: "#gjs",
    // ... other configurations
    plugins: ["grapesjs-tailwindcss-plugin"],
    pluginsOpts: {
      "grapesjs-tailwindcss-plugin": {
        // Options like autobuild, toolbarPanel, notificationCallback, buildButton, etc.
      },
    },
  });
</script>

Modern Javascript

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	Default
prefix	Prefix to use for Tailwind CSS classes. Helps differentiate Tailwind classes from others.	null
autobuild	If true, the plugin automatically rebuilds Tailwind CSS on each update. Set to false for manual builds.	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.	""
buildButton	Option to add a manual build button to the toolbar for triggering the CSS build process.	false
toolbarPanel	Specify the panel where the build button should be added (e.g., options).	options
notificationCallback	A custom callback function to handle notifications when Tailwind CSS is compiled.	() => void

Development

Clone the repository

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

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

Copyright Andrea Fassina, Licensed under MIT.