Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Componente Button não está mais renderizando padding nem round corners.

Será que o código está desatualizado?

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Descobri que alterando novamente para o valor absoluto ele funciona. Pq ele nao ta puxando pelo nome da variavel?

Funciona: const generalStyle = 'rounded-[8px] px-[32px] py-[12px]''

Não funciona: const generalStyle = 'rounded-md px-6 py-2'

solução!

Acho que ao colar do github todas as variáveis do tailwind.config (tive que fazer isso algumas aulas pra frente pois não havia encontrado o código para copiar), acabei perdendo o timing e a saída foi comentar tudo referente a spacing e border-radius.