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

Frank K Hosaka · Agosto 19

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.

William Duarte · Agosto 20

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

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

Para usar em Laravel siga o tutorial abaixo, se for seguir dicas de IA, siga pelo menos as que prestam!

https://tailwindcss.com/docs/guides/laravel

Editado Agosto 20 por William Duarte

Frank K Hosaka · Agosto 19

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>

Editado Agosto 19 por Frank K Hosaka

Frank K Hosaka · Agosto 20

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 Agosto 21 por Frank K Hosaka

Entrar

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

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

William Duarte

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades