Does grapesjs support custom styles in tailwindcss v3?

[ledinhminh98]

I'm using the CDN of tailwindcss v2 and developing a custom block for grapesjs in reactjs as follows:

const editor = grapesjs.init({
    canvas: {
      styles: [
        "https://unpkg.com/[email protected]/dist/tailwind.min.css",
      ],
 }

To custom styles like "w-fit" or "p-[15px]", I also want to apply tailwindcss v3 ( like the code below ).

const SidebarComponent = () => {
    return (
        <div className="w-fit p-[15px]"></div>
)
};

const Sidebar = (editor) => {
    editor.Components.addType("Sidebar", {
        extend: "react-component",
        model: {
            defaults: {
                component: SidebarComponent,
                stylable: true,
                resizable: true,
                editable: true,
                draggable: true,
                droppable: false,
                attributes: {
                    class: "sidebar",
                },
            },
        },
    });

    editor.Blocks.add("sidebar-block", {
        label: "Sidebar",
        category: "First Mile",
        attributes: { class: "sidebar" },
        content: {
            type: "Sidebar",
            activeOnRender: true,
            classes: ["sidebar"],
        },
    });
};

export default Sidebar;

Because tailwindcss v3 doesn't support CDN as v2 does ( https://unpkg.com/[email protected]/dist/tailwind.min.css ).
Please let me know if anyone has a solution. I'm grateful.