Conheça o Tailwind CSS
E aí, Kangaroozito! Conhecer novos frameworks e tecnologias é sempre algo não só interessante, como também importantes para pensarmos em melhorias e projetos futuros. Por isso, falaremos um pouco do Tailwind, um framework de CSS que tem tido cada vez mais popularidade e adoção pelos desenvolvedores, em uma longa disputa com o Bootstrap.
Sumário
- O que é
- Por que é útil?
- Exemplos
- Como implementar
- Conclusão
O que é Tailwind CSS?
O Tailwind é um framework de CSS, ou seja, ele ajuda a implementar uma série de recursos pré-moldados que ajudam em diversas áreas do desenvolvimento front-end, tanto em ganho de produtividade ao permitir uma estilização mais rápida, quanto em permitir visuais muito mais agradáveis e impactantes para seus visitantes.
A grande facilidade desse framework é que ele traz a estilização feita através de classes incorporadas no HTML, ou seja, você adiciona algumas classes específicas em seus elementos HTML, e o Tailwind atribuirá a partir dos moldes a aparência desse elemento, fazendo com que essas classes acabem funcionando como uma API para evocar as estilizações.
Por que é útil?
O Tailwind é extremamente útil por permitir que você não precise se preocupar tanto em estilizar “na unha” cada um dos elementos, já que o framework trará diversas classes com visuais muito legais, e assim você pode refinar o visual final manipulando essas classes.
Outro fator muito importante de se destacar é a simplicidade em que ele permite implementar a responsividade para diferentes tamanhos de tela, o que é tradicionalmente algo que alguns desenvolvedores acabam tendo maior dor de cabeça para corrigir, e que nesse caso pode ser ajustado com apenas algumas poucas classes, agilizando muito do tempo de desenvolvimento.
Além disso, ele também é muito presente em projetos que usam frameworks JavaScript, como React e Vue, por muitas vezes sendo utilizado em conjunto. Uma grande vantagem de usar o Tailwind nesses frameworks é a possibilidade de criação do seu CSS próprio.
Como implementar
O Tailwind pode ser implementado de algumas formas: como através de CDN (importando o CSS remoto do framework), através de CLIs e como uma dependência do projeto.
A grande vantagem de usá-lo através de CLI é caso mencionado no tópico anterior, onde é possível criar um CSS próprio, que terá apenas os recursos que o seu projeto realmente está usando, o que pode ajudar a diminuir significativamente o tamanho final dos seus arquivos CSS, poupando recursos e salvando tempo de carregamento final de seu site.
Para o uso através de CDN, basta adicionar o seguinte script de importação dentro das tags <head> de seu HTML:
<!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-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Já para o caso de utilização através de CLI, é possível instalá-lo de forma fácil através do NodeJS com os seguintes comandos:
npm install -D tailwindcss
npx tailwindcss initExemplos de código
Para deixar as coisas um pouco mais visuais, é hora de partir pra um exemplo prático, comparando um HTML bruto e sem estilizações, com o resultado empregado por customizações vindas das classes do Tailwind.
Aqui, temos o código HTML sem nenhuma estilização que adiciona um formulário de login:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário de Login</title>
</head>
<body>
<form action="/login" method="post">
<label for="username">Usuário:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Senha:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">Login</button>
</form>
</body>
</html>
O código acima produziu o seguinte visual:
Agora, vamos conferir o novo código com o Tailwind implementado:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário de Login</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<form action="/login" method="post" class="bg-white p-6 rounded-lg shadow-md w-full max-w-sm">
<div class="mb-4">
<label for="username" class="block text-gray-700 text-sm font-bold mb-2">Usuário:</label>
<input type="text" id="username" name="username" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">Senha:</label>
<input type="password" id="password" name="password" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
</body>
</html>
Esse foi o visual criado pelo novo código com o framework:
O resultado é sem dúvidas muito bom, mas o tanto de classes adicionada pode acabar assustando um pouco, não é mesmo? Por isso, preparamos também o código de um arquivo styles.css que poderia trazer um resultado visual parecido com o que fizemos ao usar o sistema de classes, e esse seria o código:
/* styles.css */
body.body-style {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f7fafc; /* bg-gray-100 */
margin: 0;
font-family: Arial, sans-serif;
}
.form-container {
background-color: #fff; /* bg-white */
padding: 1.5rem; /* p-6 */
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-md */
width: 100%;
max-width: 24rem; /* max-w-sm */
}
.form-group {
margin-bottom: 1rem; /* mb-4 */
}
.label {
display: block;
color: #4a5568; /* text-gray-700 */
font-size: 0.875rem; /* text-sm */
font-weight: bold; /* font-bold */
margin-bottom: 0.5rem; /* mb-2 */
}
.input {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); /* shadow */
appearance: none; /* appearance-none */
border: 1px solid #e2e8f0; /* border */
border-radius: 0.25rem; /* rounded */
width: 100%; /* w-full */
padding: 0.5rem 0.75rem; /* py-2 px-3 */
color: #4a5568; /* text-gray-700 */
line-height: 1.25; /* leading-tight */
transition: box-shadow 0.15s ease-in-out; /* focus:outline-none focus:shadow-outline */
}
.input:focus {
outline: none; /* focus:outline-none */
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* focus:shadow-outline */
}
.form-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.button {
background-color: #4299e1; /* bg-blue-500 */
color: #fff; /* text-white */
font-weight: bold; /* font-bold */
padding: 0.5rem 1rem; /* py-2 px-4 */
border-radius: 0.25rem; /* rounded */
transition: background-color 0.15s ease-in-out; /* focus:outline-none focus:shadow-outline */
border: none;
cursor: pointer;
}
.button:hover {
background-color: #2b6cb0; /* hover:bg-blue-700 */
}
.button:focus {
outline: none; /* focus:outline-none */
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* focus:shadow-outline */
}
Conclusão
Assim, não nos resta dúvida de que seria necessária uma “tonelada” de código extra via CSS para trazer resultados parecidos, sendo esse um tempo que poderia ser melhor investido em outras áreas do desenvolvimento, para trazer um resultado ainda melhor, e ainda mais rápido.
Por isso o Tailwind tem grande vantagem sobre a forma tradicional de escrever o CSS para os sites, trazendo um aumento de produtividade que com certeza será muito bem vindo em qualquer projeto! E, claro, não deixe de continuar acompanhando nosso blog para mais conteúdo como esse, e nos vemos na próxima!
24/7
11 95052-7555
0800 481 7000
chat
