Tailwind

Como criar Tooltip usando Tailwind CSS em JavaScript

João Otávio Gomes Hugill

• 8 min read
Como criar Tooltip usando Tailwind CSS em JavaScript

Ao começar a estilização do nosso site, muitas vezes, precisamos de bibliotecas e frameworks para agilizar o processo. O Tailwind CSS veio com a necessidade de entregar aplicações web de maneira rápida, sendo muito útil para landpages e projetos que provavelmente não precisarão de manutenção. Como o framework livra o programador da necessidade de escrever o arquivo CSS diretamente e agiliza o processo de estilização, diversas empresas começaram a usar a biblioteca. Com essa popularidade, se tornou comum ver o Tailwind CSS como requisito em diversas vagas de programação.

Sabendo disso, começaremos a conhecer neste artigo as principais classes e funcionalidades do Tailwind CSS com o objetivo de entender seu funcionamento e por que é tão usada no mercado de trabalho.

Classe de utilitários

O framework exclui a necessidade do CSS manual, porém, diferente do Bootstrap, o Tailwind não tem componentes predefinidos, ele tem como foco classes que ajudam na aplicação do design, tendo uma abordagem mais simples e abrindo mais possibilidades de customização do que as outras bibliotecas.

A biblioteca tailwind gira em torno das classes de utilitários, basicamente classes criadas com um código CSS associado a elas, como, por exemplo, a classe “flex” que tem como propriedade CSS o  “display: flex” ou a classe “bg-black” que tem como propriedade CSS  o “background-color:  black”.

Dentro de outras frameworks, como o Bootstrap, as classes de utilitários ocupam muito espaço dentro do seu projeto. Imagine que para cada classe de utilitário temos algumas linhas de código CSS e temos centenas de classes de utilitário. Fica fácil entender que teremos muito CSS  inutilizado. Contudo, no Tailwind, mesmo o arquivo inicial sendo grande, ele verifica as classes que foram usadas e mantém o arquivo CSS o menor possível, usando apenas o código das classes efetivamente aplicadas ao HTML.

Começando no Tailwind CSS

Agora que entendemos os conceitos básicos da  nossa biblioteca, começaremos um projeto do zero. Inicialmente é preciso criar as partes essenciais para o seu funcionamento:

1- Primeiro crie uma pasta para o seu projeto, no diretório que desejar, usando o seguinte comando no terminal:

mkdir my-first-tailwind-project
cd my-first-tailwind-project

2- Depois precisamos instalar as dependências com o comando a seguir no terminal. Ele é necessário para criar o arquivo package.json.

npm init -y

3- Agora instalamos o Tailwind CSS, além de instalar a dependência, vai salva-la no arquivo package.json

npm install -D tailwindcss

4- Criaremos uma pasta chamada src e adicionamos um arquivo input.css com esse conteúdo:

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Aqui adicionamos os PREFLIGHTS, um conjunto de estilos básicos usados para evitar inconsistências com o navegador. O comando "@tailwind base;" injeta esses estilos css no nosso arquivo CSS, fazendo com que o código antigo seja substituído pelo código correspondente quando o processo de build do Tailwind for executado.

5- Agora devemos criar um arquivo de configuração inicial para o tailwind, para isso, execute esse comando no diretório do projeto:

npx tailwindcss init

Assim criaremos um arquivo com o seguinte conteúdo:

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
  extend: {},
 },
  plugins: [],
 }

Esse arquivo é responsável por definir as configurações iniciais, apesar de não ser obrigatório, é muito importante para garantir a flexibilidade da sua aplicação, ele ficará somente com a modificação na propriedade “content”.

6- Executaremos o processo de build do tailwind, para isso executaremos o seguinte comando no terminal do diretório do projeto:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Esse comando ativa o build que pega as classes que você usou e “escreve” o código CSS no diretório /dist/output.css.

7- Agora o último passo é importar o output.css no seu arquivo index.html, como nesse exemplo:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/dist/output.css" rel="stylesheet">
   <title>Tailwind CSS</title>
 </head>
<body>
 My first project with tailwind
</body>
</html>

Com isso conseguimos usar o Tailwind CSS com o Javascript Vanilla, para instalar em outras frameworks, o processo é um pouco mais simples, caso queira conferir, recomendo verificar na documentação oficial do Tailwind CSS.

Classes do Tailwind na prática

Entendendo o funcionamento e o problema que o tailwind resolve, podemos começar a aplicar as classes em nossos arquivos HTML. Como exemplo, faremos o layout de uma página de Login com Tailwind CSS.

Crie o arquivo “index.html” no diretório /src com esse conteúdo:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
 <main class="h-screen w-full flex justify-center items-center bg-green-300">
   <form class="w-[300px] h-[60%] rounded-md bg-green-100 p-5 py-16">
     <div class="w-full flex justify-center">
       <h1 class="text-7xl text-cyan-300 m-4">Login</h1>
     </div>
     <div class="flex justify-center items-center h-full">
       <div class="flex-col justify-center items-center">
         <input class="p-3 w-full h-[40px]" type="email" name="email" id="email" placeholder="E-mail">
         <input class="p-3 my-[24px] w-full h-[40px]" type="password" name="password" id="password" placeholder="Password">
         <button type="submit" class="bg-emerald-200 my-10 px-3 w-full h-[40px] hover:-translate-y-1 hover:scale-60 duration-300 hover:bg-green-200">
           Log In
         </button>
       </div>
     </div>
   </form>
 </main>
</body>
</html>

Olhando inicialmente parece um pouco confuso, mas na prática isso agiliza muito o processo de estilização. O resultado do nosso HTML ficará assim:

Agora que garantimos que o tailwind está funcionando vamos desestruturar o código HTML explicando as classes uma por uma.

1- A primeira tag que colocamos no nosso HTML é a <main>, tag onde ficará o conteúdo principal da página e tem essas classes:

<main class="h-screen w-full flex justify-center items-center bg-green-300">

Classe “h-screen"

Tem a propriedade CSS “heigth: 100vh” e garante que a altura da tag <main> ocupará o tamanho da tela inteira.

Classe “w-full"

Tem a propriedade CSS “widht: 100%” e garante que a largura da tag <main> ocupará o tamanho da tela inteira.

Classe “flex”

Tem a propriedade CSS “display: flex:”, transformará a tag <main> em um flex container, e assim, possibilita a manipulação dos elementos filhos do container.

Classe “justify-center”

Tem a propriedade CSS “justify-content: center” e alinha os containers filhos de <main> no centro do eixo X.

Classe “items-center”

Tem a propriedade CSS “align-items: center” e alinha os containers filhos de <main> no centro do eixo Y.

Classe ”bg-green-300”

Tem a propriedade CSS “background-color: rgb(134 239 172 / var(--tw-bg-opacity))” e deixa a cor de fundo da tela verde esmeralda, temos diversas cores de background pŕé definidos, podendo ser facilmente encontrados na documentação do Tailwind, também podemos alterar a cor padrão dessas classes permitindo a customização.

2- Em seguida criamos a tag <form>, que será o flex container onde ficarão os inputs de login e senha e o botão.

<form class="w-[300px] h-[60%] rounded-md bg-green-100 p-5 py-16">

Classe “w-[300px]”

As classes que recebem valores diversos, como “%”, "px'', "vw", “vh” podem ser especificados ao passar o valor dessa maneira: [300px], [50%], entre outras variações. Nesse caso deixamos a largura do container em 300 pixels. Outras classes anteriormente explicadas serão puladas com o objetivo de resumir o conteúdo.

Classe “rounded-md”

Tem a propriedade CSS “border-radius: 0.375rem”, deixa as pontas do container mais arredondadas.

Classes para padding

As classes “p-5”, “px-2”, “py-16”, afetam o padding do elemento. O “x” refere o padding na horizontal e o “y” o padding na vertical.

3- Depois fizemos uma <div> para alinhar o título “Login” no centro com algumas das classes que já falamos anteriormente e essas:

 <div class="w-full flex justify-center">
       <h1 class="text-7xl text-cyan-300 m-4">Login</h1>
     </div>

Classes para tamanho de texto

As classes text-2xl, text-1xl, text-4xl, entre outras variações, controlam o tamanho do texto, quanto maior o número, maior o tamanho do título.

Classes para margin

Semelhante ao padding, as classes m-1, mx-1, my-1 ou m-auto, afetam a margem dos elementos. No nosso exemplo usamos o “m-4” para dar uma margem de 16 pixels ao elemento.

4- Por último fizemos uma <div> para alinhar os inputs e o botão em coluna e demos algumas classes ao botão para animação. Ao passar o mouse em cima do botão, ele se movimenta levemente para cima e fica com uma cor mais clara.

 <div class="flex justify-center items-center h-full">
       <div class="flex-col justify-center items-center">
         <input class="p-3 w-full h-[40px]" type="email" name="email" id="email" placeholder="E-mail">
         <input class="p-3 my-[24px] w-full h-[40px]" type="password" name="password" id="password" placeholder="Password">
         <button type="submit" class="bg-emerald-200 my-10 px-3 w-full h-[40px] hover:-translate-y-1 hover:scale-60 duration-300 hover:bg-green-200">
           Log In
         </button>
       </div>
     </div>

Classes para hover

Podemos usar a classe “hover:” seguida da classe que queremos ativar ao passar o mouse no elemento. Por exemplo a classe “hover:-translate-y-1”  é equivalente a propriedade css transform, e move o container 4px para cima ao passar o mouse por cima e a “hover:bg-black” deixará o fundo preto ao passar o mouse por cima.

Classe para animação

A classe “duration-300” é equivalente a propriedade CSS “transition-duration:300” e faz com que, no nosso exemplo, o botão demore 0.3 segundos para se mover 4 pixels para cima.

Com essas classes já dá para ter uma noção básica do seu uso, e aplicar em seus projetos facilmente. Existem diversas outras classes que podem ser conferidas na documentação. Recomendo instalar a extensão “Tailwind CSS IntelliSense” no seu VS Code, ele facilitará muito no seu início com o Tailwind CSS.

Conclusão, vale a pena usar Tailwind CSS?

A ideia de não ter que trabalhar com o CSS manualmente realmente é interessante, porém, na minha opinião, outros pré-processadores são melhores para trabalhar dinamicamente com as classes. É uma biblioteca que acelera a estilização, mas o código fica confuso e de difícil entendimento, além de não ter a parte CSS muito bem organizada.

Ao ver um projeto de grande porte feito em Tailwind CSS, dificilmente teremos classes descritivas e que facilitem a leitura do código. Ou seja, na construção do CSS ele é ótimo, mas na manutenção ele deixa a desejar.

Por agilizar o trabalho diversas empresas usam o Tailwind mesmo entendendo todos esses problemas. A sintaxe do tailwind é muito semelhante ao CSS inline, não dividindo o código HTML e CSS, e, para muitos, isso quer dizer que acompanha os mesmos problemas do CSS inline.

Recomendo o estudo de Tailwind CSS para fins de entendimento, já que hoje em dia ele é muito usado, apesar disso, optarei por usar outros frameworks em meus projetos, como por exemplo o Sass.