Ir para conteúdo
Fórum Script Brasil
  • 0

Laravel: trabalhando com <details> com o CSS Tailwinds


Frank K Hosaka

Pergunta

Em 2022 eu não era capaz de usar o CSS Tailwinds, eu achei ele para lá de complicado. Mas eu gostei do Laravel. Para estudar o Laravel, eu encontrei uma rotina para fazer login na internet e também encontrei um jeito de usar o Bootstrap.

Com a chegada da Inteligência Artificial em 2024, ficou bem mais fácil estudar o Tailwinds. Graças a ele, eu consegui instalar o Breeze (esse é o módulo do login no Laravel), e pouco a pouco eu pedi para o Copilot converter o <table> Bootstrap em <div> Tailwinds.

O problema foi na hora de esbarrar com um <details>, o Copilot não conseguiu fazer a conversão do jeito que eu queria.

Eu fui obrigado a estudar o Bootstrap, e descobri que a mágica acontece quando ele usa a classe "table". Assim eu pedi para o Copilot simular a classe "table" nas <div> com o Tailwinds:

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
    rel="stylesheet">
<table class=table>
    <tr><td>Codigo
        <td>
            <details>
                <summary>Produto</summary>
                <table>
                    <tr><td>Unidade
                    <tr><td>Embalagem
                </table>
            </details>
        <td>Venda
</table>

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<div class="flex">
    <div>Codigo</div>
    <div>
        <details>
            <summary>Produto</summary>
                <div>Unidade</div>
                <div>Embalagem</div>
            </details>
    </div>
    <div>Venda</div>
</div>

 

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...