ju99ernaut / grapesjs-tailwind

Tailwind integration for grapesjs

Grapesjs Tailwind(WIP)

DEMO

Requires grapesjs-plugin-forms

Tailwind intergration which includes the complete set of blocks from Tailblocks.cc, bases on Destack.

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/grapesjs-tailwind"></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: ['grapesjs-tailwind'],
});

CSS

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

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

.change-theme-button:focus {
  /* background-color: yellow; */
  outline: none;
  box-shadow: 0 0 0 2pt #c5c5c575;
}

Optional CSS

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

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

Summary

• Plugin name: grapesjs-tailwind
• Commands
  • get-tailwindCss - Get Tailwind CSS of your page
  • open-update-theme - Open theme modal

get-tailwindCss Usage

// By default it will print css to console
editor.runCommand('get-tailwindCss');

// Using options
editor.runCommand('get-tailwindCss', { /* Options here */ });

get-tailwindCss Options

Option	Description	Default
callback	Calback for resulting css	twcss => console.log(twcss)

Options

Option	Description	Default
tailwindPlayCdn	URL for fetching tailwind play cdn	https://cdn.tailwindcss.com
plugins	array to include tailwind 1st party plugins	[]
config	custom tailwind config	{}
changeThemeText	Change theme modal title	Change Theme

Download

• CDN
  • https://unpkg.com/grapesjs-tailwind
• NPM
  • npm i grapesjs-tailwind
• GIT
  • git clone https://github.com/Ju99ernaut/grapesjs-tailwind.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-tailwind.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-tailwind'],
      pluginsOpts: {
        'grapesjs-tailwind': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-tailwind';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-tailwind.git
$ cd grapesjs-tailwind

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT

grapesjs-tailwind's Issues

Get Tailwind CSS

Finding the project really interesting and useful. Thanks.

Am using the command 'editor.runCommand('get-tailwindCss')' to get the tailwind CSS used in the editor.

As the docs says, this outputs to the console, but can't find a way of getting the CSS as a variable I can save to a database.

Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'readyState')

Hi I'm using next.JS and I have this error whenever I use your other plugin (project manager) I had an error with project manager that I finally fixed but Tailwind is not working now

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'readyState')

Call Stack
eval
node_modules\grapesjs-tailwind\dist\grapesjs-tailwind.min.js (2:324087)

Cannot read properties of null (reading 'readyState')

I am use this plugin for my Grapesjs project.
Error occur when call editor.loadProjectData(data)
Please, some help!

Remove img.object-cover class

Hi there, I was using this plugin as part of grapesjs setup. I could notice that the class img.object-cover which basically adds value to grayscale is included by default for all the images. Can you remove this as part of the default setup? I find it difficult to override as it works for some blocks and doesnt work for others.

Tailwind CSS not working with grapesjs-project-manager plugin

Firstly an incredible project you have here.
I have an issue when using this plugin in combination with another of your plugins grapesjs-project-manager.
If I use local storage then The Tailwind CSS is rendered properly but the project manager does not work.
If I use indexeddb then the project manager works but the tailwind css is not rendered.

With local storage I can still create pages from within a page loaded directly and not through project manager.
However if I swap between pages then the Tailwind CSS isn’t rendered.

CSS Problems and Bug

Hi, currently to save the css I did this:

    editor.Commands.add('save-template', {
      run: function(editor, sender) {
        sender && sender.set('active', 0); // turn off the button
        editor.store();

        var htmldata = editor.getHtml();
        var cssdata = editor.getCss();
        
        var twcss = '';
        editor.runCommand('get-tailwindCss', {
          callback: function(result) {
            twcss = result;
          }
        });

        console.log(htmldata, cssdata, twcss);
      }
    });

• Would it be possible that if tailwind components are not used the 'get-tailwindcss' command returns nothing?
• Would it be possible to include the css, directly here instead of retrieving it every time?

because I have problems importing the css

• BUG: if instead I create an element, then delete it and recover the css, the previous css is shown

I get the css without any tailwind block:

I add a tailwind block and get the css:

I delete all the contents of the editor and get the css again:

once you have inserted a tailwind block if you no longer want to use it it continues to regerate the css of the last used block

Thank you

Changing theme only works one time

The change theme modal does not always work.
Once the theme has been changed, changing it again does not work.
And, sometimes the modal does not close when the Update button is clicked.
Also when a new block is dragged in it has the original colour from the block rather than the new theme colours.

grapesjs.tailwind.bug.mp4

grapesjs.tailwind.bug.2.mp4

Question: Usage of DaisyUI

Hi there

Thanks for this amazing project. I have just started using TailwinddCSS and learning it and are using DaisyUI components, which are awesome.

I'd like to intergrate them into grapeGS or perhaps is it something you are already planning.

Thank you so much.

Need help removing default blocks

I'm using grapesJs-react along with this package. Is there a way I can remove the blocks?