Tailwind BUG ?

[PanuwatChinpratan]

Anything inside [...] will not work.
exam m-[400px] can't use
But m-20 can use

NOT WORKING

editor.BlockManager.add('test-component', {
    label: 'Test Component',
    content: `<div class="m-[400px]">TEST TAILWIND</div>`,
});

[titantwentyone]

This won't be a problem with GrapesJS. You will need to ensure that this file is included in your content array in tailwind.config.js. That way, Tailwind will be able to pick up the class and generate the relevant CSS.

[mosh-tudor]

This won't be a problem with GrapesJS

How not? m-[400px] is transformed to m--400px-

This problem is already answered here (discussions), but unfortunately the author cannot use the search.

[PanuwatChinpratan]

Ohhh Thanks

[PanuwatChinpratan]

@artf @mosh-tudor sorry but i cant use this

editor.BlockManager.add('tailwind', {
    label: 'Tailwind',
    category: 'Content Format',
    attributes: {
        class: 'fa fa-cube',
    },
    content: `<div class="m--400px-"> MILO</div>`,
});

[bernesto]

Yes, I can confirm this is an issue. We are integrating tailwind into our branch right now. The escapeName method in Selector.ts does not account for the special characters that Tailwind uses in it's class names. I just submitted a pull request with an updated regex that that addresses this issue.