Um modal em Tailwind

[Frank K Hosaka]

Já faz mais de um ano que estou com o Laravel básico. Agora, avancei mais um passo: instalei o componente Breezer, agora eu tenho uma rotina de autenticação, mais comandos no Blade, uma barra de navegação e o TailwindCSS.

O problema é que estou apanhando muito para criar um modal. Hoje achei esse  tutorial: How To Make a Modal Box With CSS and JavaScript (w3schools.com) - esse tutorial é super bacana, eu gostei muito dele.

Ele não funciona no Laravel, pois ele não usa a gramática do TailwindCSS. Consultei o dicionário do Tailwind para saber como se fala "cor" e "esconder" na gramática dele, e assim consegui adaptar o código:

lcto.blade.php

<x-app-layout>
<button onclick=myModal.className='bg-red-600'>Open Modal</button>
<div id=myModal class='hidden' onclick=this.className='hidden'>
  <div>
    <p>Some text in the Modal..</p>
  </div>
</div>
</x-app-layout>

<x-app-layout> é da gramática do Blade, ele pede para incluir o código dentro de uma outra página criada pelo app.php.