Updating Button Colors in Next.js with Tailwind CSS

·

Hey everyone, I could use some help. I'm trying to update the button colours in my Next.js project. I've tried several ways of modifying the tailwind.config.js file, but the colours still won't override the default black colour on buttons. Can someone point me in the right direction? Where exactly should I define the custom colours so they apply correctly?

2 comments

· Sorted by Oldest

Kaleb J.
·
·
Hi denis g. I'll ask Nour to jump in here. He's our resident React guru 🙂
Nour
·
·
Hey denis g., if you’re using Relume’s Tailwind config and you want to change the button’s background color, you just need to change the background’s alternative color here:
background: { DEFAULT: "#ffffff", // bg-background, text-background, border-background, primary: "#ffffff", // bg-background-primary, text-background-primary, border-background-primary, secondary: "#eeeeee", tertiary: "#666666", alternative: "#000000", success: "#ecfdf3", error: "#fef3f2", }
If you want to change more than the background color, you can copy paste the Button’s source code from the docs here and paste it in a file in your codebase and import it in the components that are using the Button element.

Kaleb J.
·
·
Hi denis g. I'll ask Nour to jump in here. He's our resident React guru 🙂
Nour
·
·
Hey denis g., if you’re using Relume’s Tailwind config and you want to change the button’s background color, you just need to change the background’s alternative color here:
background: { DEFAULT: "#ffffff", // bg-background, text-background, border-background, primary: "#ffffff", // bg-background-primary, text-background-primary, border-background-primary, secondary: "#eeeeee", tertiary: "#666666", alternative: "#000000", success: "#ecfdf3", error: "#fef3f2", }
If you want to change more than the background color, you can copy paste the Button’s source code from the docs here and paste it in a file in your codebase and import it in the components that are using the Button element.