Hi there! I hope you're doing well!
I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example:
import { ButtonHTMLAttributes } from 'react';
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
title: string;
backgroundLowOpacity?: boolean;
};
export function Button({ title, backgroundLowOpacity, ...rest }: ButtonProps) {
return (
<button
{...rest}
type="button"
className={`${backgroundLowOpacity && 'bg-gray-100'}`}
>
{title}
</button>
);
}
This is the component setup. Now, when I try to use className in the parent component, it doesn't work as expected.
<Button title="Sign up" className="bg-purple-500" />
Unfortunately, this doesn't apply the color purple to my button.