Jump to content
Fórum Script Brasil
  • 0

O meu segundo modal com Tailwind


Frank K Hosaka

Question

Esse é o código do teste.blade.php, onde uso o dialeto do Blade (o botão Modal) e o dialeto do Tailwinds (o modal na forma do título do texto):

@vite(['resources/css/app.css', 'resources/js/app.js'])
<pre class="w-1/2 mx-auto my-20">
O embaixador da União Europeia no Brasil, Ignacio Ybañez, 
refuta a ideia apresentada pelo presidente Luiz Inácio Lula 
da Silva de que democracia seja um conceito relativo. 
Ele faz questão de criticar a ditadura da Venezuela, 
aliada do governo brasileiro. “Para nós, a democracia não é relativa.
Democracia existe ou não existe. Na Venezuela, não existe democracia. 
No Brasil, existe”, afirma o diplomata em entrevista à Coluna. 
“Eleições e o respeito aos direitos humanos são elementos essenciais 
na democracia. E isso não é cumprido na Venezuela”.     
</pre>
<x-primary-button class="absolute left-80 ml-6"
    onclick="modal.className='absolute top-10 left-80 ml-6 bg-blue-700'">
{{ __('Modal') }}
</x-primary-button>
<div id=modal class=hidden onclick="modal.className='hidden'">
<h1 class=text-3xl>Democracia relativa</h1>
</div>

Esse é um código que eu consegui na base da tentativa e erro, eu queria alinhar o título do texto com o texto, mas o máximo que o Tailwind permitia era deslocar o título a 80 pixels a partir da margem esquerda ("left-80"). Para conseguir mais pixels, eu fiz uma gambiarra, eu usei o recurso margem esquerda assim "ml-6".

Mas para isso funcionar, eu preciso usar o comando npm run dev ou npm run build, o que eu consigo fazer aqui no meu computador local. Esse não é o caso lá no Hostinger, a hospedagem do site que aluguei por R$ 23,00 por mês não permite usar o comando npm.

Logo, o máximo que eu consegui hospedar no Hostinger foi um Laravel bem básico, ou seja, ele não tem o Breeze, o Blade do Breeze e muito menos o projeto Chirp. O meu Laravel no Hostinger é basicamente um xerox do projeto que eu fiz no PHP. Eu coloquei o CDN do Bootstrap no arquivo menu.php e carrego esse arquivo nos outros códigos.

Para resolver o meu problema, eu só preciso mudar de plano, mudar para a hospedagem VPS. Eu não tenho a menor ideia de como o VPS funciona. Uma coisa é digitar npm aqui no computador local e outra bem diferente é digitar o comando lá no servidor. Antes de mudar de plano, estou estudando o Tailwind por aqui, até eu me sentir 2% seguro com um novo dialeto do CSS.

 

Captura de tela 2023-07-26 091043.png

Edited by Frank K Hosaka
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...