Looking to implement a straightforward button component in a Next App using Tailwind CSS, where I can pass values such as background color, text color, etc. through props and use them to render different types of buttons within my application.
Take a look at the available color options:
export type ColorOptions =
| "light"
| "primary"
| "secondary"
| "terciary"
| "details";
Here is the code for my customized button component:
import { ButtonHTMLAttributes } from "react";
import { ColorOptions, FontOptions } from "@/app/@types/theme";
type ButtonNativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
type ButtonProps = ButtonNativeProps & {
children: React.ReactNode;
onClick: () => void;
color?: ColorOptions;
background?: ColorOptions;
font?: FontOptions;
fontSize?: string;
icon?: React.ReactNode;
styleProps?: string;
};
export default function Button({
children,
onClick,
color = "light",
background = "terciary",
// Rest of the component code goes here...
And this is my tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
// Custom theme configurations...
Initially, everything seems to be working fine as you can see in this initial result.
However, upon specifying a value in the button component like so, the expected result disappears:
<Button background="details" onClick={() => {}} />
The desired background color is not applied.
Even though the class is correctly defined in the HTML element according to the browser's elements tree, the colors are not being displayed properly.