Tailwind inline-block

[Frank K Hosaka]

Hoje eu precisei criar três botões dentro de um <form>. Utilizei três <button>, só que os dois últimos botões não funcionaram da maneira que esperava, eles estavam submetendo o formulário, quando eu não queria isso.

Assim, eu decidi mudar os últimos botões para um link, eles faziam o que eu esperava, mas tudo ficou desalinhado. O navegador desenha o <button> de um jeito e o <a> de outro.

O Copilot sugeriu eu usar a classe inline-block dentro do marcador <a> e deu certo!

 

<script src="https://cdn.tailwindcss.com"></script>
<form method=post action="?rota=Entrada_modalModificado">
  <button type="submit" class="w-[100px] border border-4 rounded-lg px-2">
                    Atualizar
  </button>
  <a class="w-[100px] border border-4 rounded-lg px-2 inline-block text-center"
                    href='?rota=Entrada_excluir_<?=$e->id?>'>
                    Excluir
  </a>
  <a class="w-[100px] border border-4 rounded-lg px-2 inline-block text-center"
                    href='?rota=Entrada_entraProduto'>
                    Cancelar
  </a>
</form>