N
Novu•2d ago
Sam Hepburn

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 and @novu/nextjs, and saw the same problem exhibited. Weirdly, the example in the docs does actually work for the two given examples:notification and 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?
1 Reply
Pawan Jain
Pawan Jain•19h ago
@Sam Hepburn I am looking into this @Sam Hepburn we have identified a bug on this. I will keep you updated on the fix

Did you find this page helpful?