Tailwind CSS - Exemplo

Suponha que deseja criar o seguinte componente, como na imagem abaixo, na sua página:

Componente exemplo. Fonte: Autor

Sim, parece um elemento simples, mas repare que ele contém bordas arredondadas, uma imagem à esquerda e dois textos posicionados de maneira específica, além de uma sombra. Talvez você consiga criar algo similar com outros frameworks CSS, mas vamos por enquanto utilizar HTML e CSS puro pra isso. O resultado seria algo assim:

 <div class="chat-notification">
   <div class="chat-notification-logo-wrapper">
     <img class="chat-notification-logo" src="https://www.imd.ufrn.br/portal/assets/images/imd_mobile_logo.png" alt="IMD Logo">
   </div>
   <div class="chat-notification-content">
     <h4 class="chat-notification-title">Bate Papo</h4>
     <p class="chat-notification-message">Você tem uma nova mensagem!</p>
   </div>
 </div>
  <style>
   .chat-notification {
     display: flex;
     max-width: 24rem;
     margin: 0 auto;
     padding: 1.5rem;
     border-radius: 0.5rem;
     background-color: #fff;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
   .chat-notification-logo-wrapper {
     flex-shrink: 0;
   }
   .chat-notification-logo {
     height: 3rem;
     width: 3rem;
   }
   .chat-notification-content {
     margin-left: 1.5rem;
     padding-top: 0.25rem;
   }
   .chat-notification-title {
     color: #1a202c;
     font-size: 1.25rem;
     line-height: 1.25;
   }
   .chat-notification-message {
     color: #718096;
     font-size: 1rem;
     line-height: 1.5;
   }
 </style>

Repare que foram criadas classes próprias para cada um dos elementos do componente e logo depois foram adicionados estilos para essas classes, para se obter o visual desejado.

Como o Tailwind oferece várias classes de estilo, vamos ver como se criaria esse mesmo componente utilizando ele:

 <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
   <div class="flex-shrink-0">
     <img class="h-12 w-12" src="https://www.imd.ufrn.br/portal/assets/images/imd_mobile_logo.png" alt="IMD Logo">
   </div>
   <div>
     <div class="text-xl font-medium text-black">Bate Papo</div>
     <p class="text-gray-500">Você tem uma nova mensagem!</p>
   </div>
 </div>

E o resultado:

Componente criado com o TailwindCSS. Fonte: Autor

Bem mais simples. Repare que não precisamos utilizar nenhum CSS extra, fora as classes do Tailwind para criar esse componente totalmente personalizado. Entretanto usamos algumas classes utilitárias disponíveis para chegar ao resultado. Vamos explorar quais foram elas:

• Utilitários de flexbox and padding (flex, flex-shrink-0 e p-6) para controlar o layout geral do card (componente geral).
• Utilitários de max-width e margin (max-w-sm e mx-auto) para restringir a largura do card e centralizá-lo horizontalmente
• Utilitários de background color, border radius, e box-shadow (bg-white, rounded-xl, e shadow-md) para estilizar a aparência do card
• Utilitários de width(largura) e height(altura) (w-12 e h-12) para dimensionar a imagem do logo
• O utilitário space-between(espaço entre): (space-x-4) para ajustar o espaçamento entre a logo e o texto.
• Os utilitários de font size(tamanho da fonte), text color(cor do texto), and font-weight(peso da fonte) (text-xl, text-black, font-medium etc.) para estilizar o texto do card.

Veja que o Tailwind é uma ferramenta que ajuda muito quem deseja criar interfaces totalmente personalizadas com utilitários que diminuem a necessidade de se usar CSS puro.

Se você conhece bem estilos CSS, pode se perguntar: "Por que então não se usar estilos inline com a atributo style?".

O que acontece é que o Tailwind é uma abordagem superior a estilos inline pois ele oferece suporte a estados com, por exemplo, o "hover", "focus", etc, fornece responsividade e permite uma abordagem de design baseada em restrições.

Vamos mudar o elemento que tem "Você tem uma nova mensagem" com as classes Tailwind abaixo e ver o que acontece quando passo o mouse sobre a mensagem:

<p class="text-gray-500 rounded p-1 text-blue-400 cursor-pointer hover:text-white hover:bg-purple-600 ">Você tem uma nova mensagem!</p>

Componente Tailwind com novas classes. Fonte: Autor

Veja o que modificamos no texto da mensagem com cada classe extra:

• rounded: informamos que o elemento tem cantos arredondados
• p-1: adicionamos um padding simples no elemento
• text-blue-400: a cor padrão do elemento é um azul 400 (o Tailwind tem uma tabela de cores nesse padrão. Quando maior o número mais forte e escura é a cor)
• cursor-pointer: informamos que o cursor deve indicar que o elemento é clicável
• hover:text-white: quando o mouse passa por cima o texto muda para branco
• hover:bg-purple-600: quando o mouse passa por cima o fundo muda para roxo 600