is it possible to suggest Tailwind classes?

[vizardkill]

Hello colleagues, I had a question, in case I wanted to suggest Tailwind classes, do I need to put all the classes offered by the library in the options part?, or is there an option so that I can automatically connect to the Tailwind library to import those listings?

[lexoyo]

Hello

That's a really cool idea!

For now the algorithm just browse all the pages and all the components to build the list of classes used in the website

So this will not show Tailwind classes untill you used them in the site already

To do what you suggest I will need to rewrite the algorithm and list all css classes available in the site. As soon as I have a moment I work on a symbols plugin, so If you have the skills let me know and I'll point out where exactly you can change the logic. Otherwise I will keep it in mind for later

[vizardkill]

I think it's great if you show me where I can make the adjustment.

It would be interesting to make a function that receives one or many css files that reads the name of the properties and then suggests them, maybe I can work on that to see how the experiment turns out

[lexoyo]

Sure that would be a great experiment

Here is where the array of css classes is built: https://github.com/lexoyo/grapesjs-ui-suggest-classes/blob/main/src/index.js#L53

I am wondering if there is a way to get all available css classes with grapesjs API

[lexoyo]

Hey @vizardkill did you try something ?
Have a nice day

[alandow]

I'd like to see this happen too- imagine being able to dynamically add any class available!

Will fork and have a play: maybe some way to arbitrarily add classes to the suggestions list would be a good start, from there you might be able to read the Tailwind css file and extract a list of classes to add.

[alandow]

So: it's really easy as it turns out!!!

The code in this plugin lists all classes in the SelectorManager, but then filters out the ones that aren't in use.

Removing the line:

  // Keep only classes which are in use
  .filter(({sel, count}) => count > 0)

stops this from happening, and adding classes either explicitly like:

// You can reference the Selector Manager like this:
const sm = editor.SelectorManager;
// Add a new class to the system
const newClass = sm.addClass('my-nice-class');
// Add a new class to the system

or by maybe updating the plugin itself to take a list and then adding them in the list when shown? could work nicely.

Will have a go at updating the plugin and get back to you...

[lexoyo]

Excellent !
Maybe add to the options a flag to disable filtering unused classes?
Would that be enough to see all tailwind classes? Or is it necessary to add an array of arbitrary classes?

[lexoyo]

Also note that I am working on a full replacement of Selector Manager. Maybe you want to help me add tailwind to it
https://github.com/silexlabs/grapesjs-advanced-selector

[alandow]

I'll add the option!
I think that this plugin only sees classes that are already in the SelectorManager, so you'll have to add them somehow.
This could be an arbitrary array of classes, but I'm thinking it would be possible to get this array of classes from the CSS in the page. If the CSS is tailwind, then you will see all tailwind classes, if it's Bootstrap, then you will see bootstrap classes.

Maybe this could help with your advanced selector manager too if the approach is compatible?

[lexoyo]

Indeed it could!

[alandow]

So, I'm thinking that adding an arbitrary array of class names might be a better idea than reading the existing CSS classes, as there is about 500 classes in Tailwind, and the list gets... long.

(although it does filter down nicely with input)

But there may be use cases for this. I propose:

• Make showing only in use classes an option
• Adding an option to add an arbitrary array of classes - give a developer the ability to 'lock down' classes based on a defined list
• OR adding a path to a CSS file to extract classes from- this will give the developer some ability to 'lock down' available classes based on a stylesheet.

See https://github.com/alandow/grapesjs-ui-suggest-classes/blob/main/src/index.js for how it could work

[lexoyo]

Hello
Very interesting thank you
What we could do is to create blocks with tailwind components
https://tailwindui.com/components

Then the css classes that the components on the canvas use would show up right ?