Achei um bom tutorial para TailwindCSS

Frank K Hosaka · Junho 14, 2023

Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme | Blog TreinaWeb - esse é o endereço que me ajudou a instalar o Tailwind no meu notebook. Existe um tutorial também na página oficial do Tailwind, mas enfrentei um monte de mensagens de erro, e eu não sabia para onde ir, já esse tutorial deixou o meu notebook redondo.

Nos primeiros testes que eu fiz, notei que as minhas gambiarras não funcionam mais, do tipo <div style:'width:500;margin:0 auto'>. Ou seja, a minha fase de improvisação com o Bootstrap chegou no fim. Esse é o preço que tenho que pagar para poder estudar o Laravel e instalar um facilitador do tipo Livewire.

Frank K Hosaka · Junho 14, 2023

Bom, já faz quatro horas que estou estudando o Tailwind, estou começando a ficar desesperado. Acredito que o melhor é não instalar nada no notebook, e fazer um link direto no CDN do tailwindcss, assim:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-black">TreinaWeb!</h1> <!--não funciona, precisa ser configurado-->
    <h1 class="text-blue-600">Escola Online</h1>
    <h1 class="text-green">Para Desenvolvedores</h1> <!--não funciona, precisa ser configurado-->
</body>
</html>

Pelo menos eu descobri que é possível eu fazer os meus estilos improvisados junto com o Tailwind, basta arrancar a instrução <!doctype html> do código. Essa não é a forma correta de programar, mas eu sou de opinião que os fins justificam as gambiarras.

Frank K Hosaka · Junho 14, 2023

A seguir uma lista onde eu uso o meu CSS improvisado, o CDN do Bootstrap e o CDN do Tailwind, mas isso só é possível se você omitir o código <!doctype html> :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
    crossorigin="anonymous">
<script src='https://cdn.tailwindcss.com'></script>
<?php
$mysqli=new mysqli("localhost","root","","laravel");
$query=$mysqli->query("select * from tbprod where prod like 'disponivel' limit 5");
// tailwind
echo "<table class='table-auto border-collapse border border-slate-300'>";
while($row=$query->fetch_assoc()){
    echo "
    <tr class='even:bg-amber-100 odd:bg-blue-100'>
    <td class='p-2'>".$row['codprod']." 
    <td class='p-2'>".$row['prod'];}
// bootstrap & improvisado
echo "</table><div style='width:100'><table class='table table-striped'>";
$query=$mysqli->query("select * from tbprod where prod like 'disponivel' limit 5");
while($row=$query->fetch_assoc()){
    echo "<tr><td>".$row['codprod']."<td>".$row['prod'];}
echo "</table></div>";

Frank K Hosaka · Junho 17, 2023

O Tailwind é bem diferente, mas no momento eu só estou preocupado com a mensagem que vejo no painel de inspeção do navegador, ele reclama quando eu uso o recurso do CDN. Para evitar esse contratempo, eu criei um roteiro para criar o arquivo tailwind.css para usar no PHP, vou usar como rascunho para o Laravel (o Laravel já vem com o Tailwind embutido, quando você estuda o projeto Chirper ou acrescenta o Breezer), com o tailwind.css posso conectar o HTML pelo marcador <link>:

npm init -y
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
criar arquivo style.css com o conteúdo
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss-cli build -o tailwind.css

Frank K Hosaka · Junho 17, 2023

Agora estou testando o tailwind no PHP. Botei o arquivo tailwind.css no diretório C:/Wamp64/www.

Para testar, criei um novo diretório: C:/Wamp64/www/tailwind.

Peguei o meu arquivo index.php e botei no novo diretório, ele era a base de Bootstrap, mudei o link para:

Como eu não sei absolutamente nada de tailwind.css, estudei o primeiro exemplo desse tutorial:

Tailwind CSS Login Form - Flowbite

Na hora de testar, o botão para confirmar não apareceu. Fui obrigado a ler o código do botão:

<button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 
   focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg 
   text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 
   dark:focus:ring-primary-800">Sign in</button>

Eu achei muito estranho a gramática bg-primary-600. A palavra primary é mais familiar do Bootstrap, então eu mudei para blue, e assim consegui colocar o botão na tela do navegador.

Ou seja, todo tutorial no Google é bem vindo, só que muita gente não testa o que escreveu, e assim a gente perde mais tempo do que aprender algo de útil. Eu gostei do comando focus, ele funciona no botão, mas não no input. Então decidi tirar o comando focus do input bem como o dark. Eu ainda estou no começo, mas estou contente por ter conseguido usar o Tailwind no PHP:

<?php
session_start();
$mensagem="";
if(isset($_SESSION['mensagem'])){$mensagem=$_SESSION['mensagem'];}
if(isset($_GET['limpar'])){unset($_SESSION['id']);}?>
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projeto PHP</title>
<link href="../tailwind.css" rel="stylesheet">
<section class="bg-gray-50 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center 
  px-6 py-8 mx-auto md:h-screen lg:py-0">
<a href=# class="flex items-center mb-6 text-2xl font-semibold text-gray-900 
  dark:text-white">Projeto PHP</a>
<a href=# class="flex items-center mb-6 text-2xl font-semibold text-gray-900 
  dark:text-white"><?=$mensagem?></a>
<div class="w-full bg-white rounded-lg shadow dark:border 
  md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 class="text-xl font-bold leading-tight tracking-tight 
  text-gray-900 md:text-2xl dark:text-white">
  Acesse sua conta
</h1>    
  <form class="space-y-4 md:space-y-6" method=post action=menu.php>
  <div>
  <label for="email" class="block mb-2 text-sm font-medium text-gray-900
    dark:text-white">Seu email</label>
  <input type=email name=email id=email class="bg-gray-50 
    border border-gray-300 text-gray-900 sm:text-sm rounded-lg 
    block w-full p-2.5" 
    placeholder=nome@gmail.com required="">
  </div>
  <div>
  <label for="password" class="block mb-2 text-sm font-medium text-gray-900 
    dark:text-white">Senha</label>
  <input type=password name=senha id="password" placeholder="••••••••" 
    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg 
    block w-full p-2.5" required="">    
  </div>
  <div>
  <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700
   focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg 
   text-sm px-5 py-2.5 text-center">Entre</button>
  </div>
</form></div></div></section></html>

Entrar

Achei um bom tutorial para TailwindCSS

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Frank K Hosaka

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

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades