Laravel: trabalhando com <details> com o CSS Tailwinds

[Frank K Hosaka]

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 Novembro 24 por Frank K Hosaka