Estava seguindo o exemplo da aula, mas por algum motivo assim que passo o argumento classe para a função, ele para de renderizar as classes "px-6" e "py-2", mas continua renderizando o "rounded-md" que está na constante "generalStyle". Achei estranho, parei o servidor e quando voltei ele deixou até de renderizar as cores e o "rounded-md". O engraçado é que as classes no painel do Chrome estão lá, mas é como se o tailwind ou as variáveis do CSS deixassem de funcionar ou algo assim. Testei também no Fiirefox, mas o problema persistiu.
Segue meu código:
export type ButtonProps = {
children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
const Button = ({ children, className, disabled, ...rest }: ButtonProps) => {
const generalStyle = 'rounded-md px-6 py-2';
const Btn = (classes: string) => {
return (
<button
className={`
${generalStyle}
${classes}
${className}
`}
disabled={disabled}
{...rest}
>
{ children }
</button>
)
}
return Btn(disabled ? 'bg-bg-disabled text-text-disabled' : 'bg-primary text-white');
}
export default Button;
E o mais curioso é que mesmo que eu volte ao código do jeito que estava antes, ele continua dando este problema, preciso parar o servidor e voltar diversas vezes para voltar ao normal.
