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

<script src="https://cdn.tailwindcss.com"></script>


Frank K Hosaka

Pergunta

Hoje fui ver o código Laravel do welcome.blade.php e para a minha surpresa encontrei um link para o cdn do Tailwinds, do mesmo jeito que eu faço com o Bootstrap.

O Bootstrap tem dois links, um para o CSS e outro para o JavaScript, já o Tailwinds só tem o link para o JavaScript.

A primeira conclusão que eu cheguei é que agora eu posso usar o Tailwinds no PHP, ou que não preciso usar o composer para ajeitar as classes CSS no Laravel.

Fui no meu laboratório wamp64.www.astudy e criei o famoso arquivo index.php:

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="size-12" src="laravel.svg">
  </div>
  <div>
    <div class="text-xl font-medium text-black">Frankbook</div>
    <p class="text-slate-500">Você tem uma nova mensagem!</p>
  </div>
</div>

Agora sim eu vi que é negócio trabalhar com o Tailwinds, ele é tão versátil quanto o Bootstrap.

O problema é conseguir o arquivo de imagem .svg - pesquisando na internet encontrei um portal que pediu R$ 40,00 por mês.

Eu fui no Wikipedia e lá encontrei um .svg com o logo do Laravel. Baixei no PC e utilizei no código de teste.

Mas o Wikipedia me alertou que posso ir na cadeia se o autor da imagem reclamar que estou usando a imagem sem o consentimento dele. Por esse motivo, o meu projeto Orçamento não tem nenhuma imagem para não ter dor de cabeça com o TSJ.

Captura de tela 2024-08-19 075704.png

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

Com o velho método da tentativa e erro e a Gemini consegui imitar mais ou menos o formulário do login do Bootstratp:

 

arquivo appView.php
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<title>Projeto Classe</title>
<body class="md:w-4/12 md:mx-auto bg-gray-200">

  
arquivo loginView.php
<?php require 'appView.php'; ?>
<main class="h-screen flex justify-center items-center">
<?php if(isset($_SESSION['mensagem'])): ?>
    <div>
        <?=$_SESSION['mensagem']?>
    </div>
<?php endif; ?>
<form method=post action="?login.menu">
    <h1 class="text-2xl mb-4 font-normal">Projeto Classe</h1>
    <div class="relative">
    <input type="email" name=email class="border px-4 py-2 rounded-md focus:outline-none py-3">
    <label class="absolute left-4 -top-0 text-gray-500 text-xs">Email</label>
    </div>
    <div class="mb-1"></div>
    <div class="relative">
    <input type="password" name=senha class="border px-4 py-2 rounded-md focus:outline-none py-3">
    <label class="absolute left-4 -top-0 text-gray-500 text-xs">Senha</label>
    <div class="mb-1"></div>
    <button class="w-full bg-blue-500 hover:bg-blue-700 text-white
         font-bold py-3 px-6 rounded" type="submit">Entrar</button>
</form>
</main>

 

Captura de tela 2024-08-19 122611.png

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

  • 0
Em 20/08/2024 em 02:18, William Duarte disse:
 

Link de CDN é para testes, não é para produção.

A mensagem do William é importante. Não dá para usar o Tailwinds como o Bootstrap. Tentei usar o JavaScript para exibir as opções do menu, mas o inspetor do navegador disse a mesma coisa que o William, o cdn é para testes rápidos, nada tão sofisticado como exibir opções. É uma pena, isso vai dificultar bastante o estudo do Laravel.

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

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...