GrapesJS TailwindCSS v4 Plugin

[fasenderos]

Hello everyone,
I’m happy to share a plugin I’ve created to integrate TailwindCSS v4 into GrapesJS! This plugin dynamically builds the Tailwind CSS on-the-fly and makes it available in the export.

Link: https://github.com/fasenderos/grapesjs-tailwindcss-plugin
Demo: https://codesandbox.io/p/sandbox/grapesjs-tailwindcss-4-plugin-demo-d24p68

Any feedback is greatly appreciated

[artf]

That's awesome @fasenderos 💜

My only suggestion would be around your setTailwindStyleElement. When you have to inject anything custom inside GrapesJS iframes, outside of its Component models, you can rely on canvas events, this will make your integration work with multiple pages/frames.

editor.on('canvas:frame:load:body', ({ window }) => {
 // ...
 // window of the iframe
 window.document.head.appendChild(...)
});

[artf]

I was thinking this kind of API could return an array of SelectorProps but I guess it could also accept simple strings for something totally custom as a selector.

[fasenderos]

In the meantime, I’ve integrated autocomplete suggestions into the plugin (DEMO) using an external library instead of reinventing the wheel.
The trickiest part is having a default list of Tailwind classes since they can potentially be infinite. For now, I’ve included the Layout, Flex/Grid, Spacing, and Sizing classes, which amount to around 1,700.

If you know a better way to extract the list or have any other suggestions, let me know!

[lexoyo]

Did you hard code the class names or did you build them with rules ?
Did you use something like https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#autocomplete ?

[fasenderos]

At the moment, I'm building them with a simple function that can definitely be improved.
https://github.com/fasenderos/grapesjs-tailwindcss-plugin/blob/main/src/assets.ts

[lexoyo]

Great to see the suggestions!

I can't really use the UI part because my UI is quite complex compared to the default Selector Manager and it offers completion of other things.

At the moment, I'm building them with a simple function that can definitely be improved.
https://github.com/fasenderos/grapesjs-tailwindcss-plugin/blob/main/src/assets.ts

So this is what I should use to get my completion right?

I think we need to help the user navigate the css classes because there is so many, so it would be great if the list of classes include a help text and the actual css styles (what shows up on hover in visual code) so that we can display it, what do you think? (I have no idea how to do that, probably with the vscode plugin?)

[fasenderos]

@artf thanks you 😄

My only suggestion would be around your setTailwindStyleElement. When you have to inject anything custom inside GrapesJS iframes, outside of its Component models, you can rely on canvas events, this will make your integration work with multiple pages/frames.

Good catch. I created a PR to support the Page Manager, would you like to take a look at it?

fasenderos/grapesjs-tailwindcss-plugin#1

Thanks in advance