Can't customise @novu/react v3.1.0 with Tailwind V3, Next.js

I am attempting to customise the Inbox component using Tailwind, as per the docs. In v2.* this worked fine. Today I upgraded to v3.1.0 and my styles are no longer applied.
Styles work correctly when applied using an object containing style properties, but not Tailwind classes.
I tested using both

@novu/react

@novu/react

and

@novu/nextjs

@novu/nextjs

, and saw the same problem exhibited.

Weirdly, the example in the docs does actually work for the two given examples:

notification

notification

and

bellIcon

bellIcon

.
I cannot get any of the other classes to be be modified using tailwind.
I wonder if this is related to classnames containing

__

__

?

E.g.

const appearance = {
    elements: {
        // THESE FROM THE DOCS WORK CORRECTLY
        bellIcon: "p-4 bg-white rounded-full",
        notification: "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",

        // THIS DOES NOT WORK
        preferences__button: "hidden",

        // THIS WORKS CORRECTLY
        preferences__button: {
            display: "none"
        }
    }
};

const appearance = {
    elements: {
        // THESE FROM THE DOCS WORK CORRECTLY
        bellIcon: "p-4 bg-white rounded-full",
        notification: "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",

        // THIS DOES NOT WORK
        preferences__button: "hidden",

        // THIS WORKS CORRECTLY
        preferences__button: {
            display: "none"
        }
    }
};

Is this a known issue?

Novu•10mo ago•

2 replies

Sam Hepburn

Can't customise @novu/react v3.1.0 with Tailwind V3, Next.js

@novu/react

@novu/react

and

@novu/nextjs

@novu/nextjs

, and saw the same problem exhibited.

Weirdly, the example in the docs does actually work for the two given examples:

notification

notification

and

bellIcon

bellIcon

.
I cannot get any of the other classes to be be modified using tailwind.
I wonder if this is related to classnames containing

__

__

?

E.g.

const appearance = {
    elements: {
        // THESE FROM THE DOCS WORK CORRECTLY
        bellIcon: "p-4 bg-white rounded-full",
        notification: "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",

        // THIS DOES NOT WORK
        preferences__button: "hidden",

        // THIS WORKS CORRECTLY
        preferences__button: {
            display: "none"
        }
    }
};

const appearance = {
    elements: {
        // THESE FROM THE DOCS WORK CORRECTLY
        bellIcon: "p-4 bg-white rounded-full",
        notification: "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",

        // THIS DOES NOT WORK
        preferences__button: "hidden",

        // THIS WORKS CORRECTLY
        preferences__button: {
            display: "none"
        }
    }
};

Is this a known issue?

Can't customise @novu/react v3.1.0 with Tailwind V3, Next.js

Similar Threads

Can't customise @novu/react v3.1.0 with Tailwind V3, Next.js

Similar Threads

Similar Threads

Similar Threads