Estilizando sua aplicação
Se você é um desenvolvedor frontend, já deve ter se deparado com esse dilema:
Como vou adicionar estilo à minha aplicação?
O caminho mais comum é, obviamente, escrever seus em um arquivo .css. Por este4 caminho é possível ter um alto grau de customização, mas a quantidade de trabalho é quase proporcional.
A princiapl alternativa a esse caminho, para grande parte dos desenvolvedores, é utilizar framerworks como Bootstrap, Bulma e Materail UI. Ao escolher utilizar uma dessas frameworks para seu projeto, você aumenta (e muito) a velocidade com que consegue adicionar estilo e padronização para sua interface de usuário. Mas essa facilidade vem ao custo de da dificuldade em customizar seus componentes - gerando uma quase padronização das páginas que vemos por aí hoje em dia.
É entre esses dois extremos que brilha o framework Tailwind CSS. Criado em 2017, Tailwind tem a proposta de fornecer as ferramentas (que eles chamam de utility classes) para você criar seus componentes (ao invés de fornecer os componentes já prontos).
Neste artigo vou mostrar um pouco das principais vantagens de se utilizar Tailwind para prototipagem, MVP's e até para seu produto final.
Como assim utility first?
Para explicar o conceito de utility first proposto pelo Tailwind, vamos recriar o Botão padrão do Bootstrap com CSS puro, Bootstrap e Tailwind.
CSS puro
Para css puro, precisamos primeiro definir a classe, que vou chamar de .bootstrap-btn, e depois aplicá-la a um botão.
.bootstrap-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
color: #fff;
background-color: #007bff;
}
<button class="bootstrap-btn">Primary</button>
Bootstrap
No Bootstrap, como dissemos anteriormente, o componente já está pronto e só precisamos adicionar classes ao botão.
<button class="btn btn-primary">Primary</button>
Aqui aplicamos duas classes ao componente, btn, que define formato e interações/animações do botão, e btn-primary, que define as cores.
Tailwind CSS
Para recriar este mesmo botão com Tailwind, vamos adiciona uma série de classes (os utilities), como se fossem blocos de montar, para criar o estilo que queremos.
<button class="bg-blue-500 rounded px-4 py-2
font-sans text-white hover:bg-blue-600">
Primary</button>
Os nomes são bem intuitivos, mas vamos ver classe por classe:
-
bg-blue-500: Adiciona a cor #4299e1 como cor de fundo do botão (falaremos jájá sobre esse 500); -
rounded: Define border-radius de 0.25 rem; -
px-4: Adiciona 1 rem de padding tanto em na parte esquerda quanto na parte direita do botão (eixo x); -
py-2: Adiciona 0.25 rem de padding tanto em na parte superior quanto na parte inferior do botão (eixo y); -
font-sans: Define a família da fonte para sans-serif; -
text-white: Define a cor do texto para branca; -
hover:bg-blue-600: Define a cor de fundo #3182ce quando o mouse está sobre o elemento.
Nesse exemplo, podemos ver bem como Tailwind é um meio termo entre frameworks que te fornecem os componentes e o css puro: ele te fornece peças com estilos bem pensados para que você crie seus componentes.
Porém, ainda parece mais interessante usarmos Bootstrap para criar este simples botão, certo? Em Boostrap precisamos adicionar 2 classes contra 5 em Tailwind. Mas e se quisermos que o botão tenha um tom de azul mais claro? Ou ainda mais - se quisermos que o botão tenha um comportamento diferente ao colocarmos o mouse sobre ele?
Customização
Aqui é onde Tailwind realmente brilha. As novas versões do Bootstrap (atualmente versão 5) vêm permitindo cada vez mais customizações ao seus componentes padrões. Para isso, porém, é necessário alterar os padrões, conhecer um pouco de Sass ou reescrever as classes. Já o Tailwind proporciona uma grande variedade de utilities, permitindo um alto grau de customização dos seus componentes sem escrever uma única linha de CSS.
Vamos, por exemplo, trocar a cor do botão do Tailwind e deixar ele mais arredondado (formato de pílula):
<button class="bg-orange-500 rounded-full px-4 py-2
font-sans text-white hover:bg-orange-600">
Primary</button>
Tudo que tivemos que fazer foi trocar as cores de bg-blue-500 e bg-blue-600 para bg-orange-500 e bg-orange-600, além de utilizar rounded-full no lugar de rounded. Simples não?
Mas vamos ter que digitar todas essas classes para todos os botões, criando um código gigante e difícil de achar eventuais bugs? A resposta é não!
Compoenente Tailwind CSS
Um dos principais benrfícios de se utilizar Tailwind é a possibilidade de criar seus próprios componentes e utilizá-los em qualquer parte do seu app. Para criar uma classe de css para o botão alaranjado acima, precisamos adicionar o código ao arquivo tailwind.css, criado na instalação do pacote.
.btn-orange{
@apply bg-orange-500 rounded-full px-4 py-2
font-sans text-white
}
.btn-orange:hover{
@apply bg-orange-60
}
A diretiva @apply literalmente "aplica" os utilities à classe btn-orange. Agora podemos aplicar essa classe aos botões do nosso aplicativo digitando apenas esses 10 caracteres. Incrível não?
E por quê não usar CSS puro?
A principal vantagem de usar o Tailwind ao invés de usar CSS é que uma série de decisões que o desenvolver tem que fazer (rem vs. px vs. %, 10% ou 12% de curvatura nas bordas, etc.) já foram feitas pelo time de desenvolvedores do Tailwind.
Além disso, todos os padrões foram muito bem pensadas. Desde o tamanho das fontes, tamanho das sombras até a paleta de cores padrão (veja mais abaixo), todos os estilos ornam muito bem entre si.
✔️ Mais alguns prós de usar Tailwind
Para este artigo não ficar muito longo, vou listar aqui alguns pontos positivos de usar o Tailwind para estilizar suas aplicações.
Paleta de cores
Uma das primeiras características que me chamou atenção quando vi apps criados utilizando tailwind pela primeira vez foram as cores. Tailwind vem com 10 diferente paletas de cores, cada uma com 9 tons diferentes da mesma cor (e é daí que o 500 e 600 que utilizamos nos botões acima vem). Essa é a paleta azul, por exemplo:
Altamente responsivo
Tailwind css vêm com os utilities necessário para criar apps totalmente responsivos. Assim como fizemos com a propriedade hover nos botões acima, podemos usar as propriedades sm, md e lg para diferentes @media break-points. E o que eu, particularmente, acho mais um ponto positivo do Tailwind: é mobile-first. Ou seja, você define os estilos para telas menores e os utilities de tamanho de tela alteram o estilo a partir daquele tamanho.
Documentação
A documentação do Tailwind, assim como, de vários outras frameworks de css, é completíssima. Todas as dúvidas e exceções que eu precisei resolver até agora foram facilmente encontradas na documentação.
Constantemente atualizado
A pequena equipe do Tailwind está constatemente atualizando o framework, e a cada versão eles consertam um ou outro bug encontrado por desenvolvedores. Além disso, a conta oficial do Twitter do Tailwind e do desenvolvedor principal (@tailwindcss e @adamwathan) estão constantemente em contato com os desenvolvedores que usam o framework para saber as opniões e requisições que podem fazer a experiência de programar mais fácil e intuitiva.
✖️ Os poucos contras que encontrei até agora
Necessita Node.js para funcionar bem
Devido à série de funcionalidades (que eu apenas toquei em alguma aqui), Tailwind precisa ser instalado utilizando npm/yarn. Ou seja, não dá para utilizar tudo o que Tailwind oferece em um aplicativo simples com html/css/js.
Documentação apenas em inglês
A falta de tradução em português ou até mesmo em espanhol pode ser um problema para desenvolvedores que não estão familiriazados com inglês.
Conclusão
Se você está iniciando um novo projeto e procurando a melhor forma de estilizar seus componentes, dê uma chance ao Tailwind. É realmente impressionante a flexibilidade que este framework possibilita, ao mesmo tempo que as escolhas que seus desenvolvedores fizeram praticamente "garantem" que seu aplicativo será visualmente apelativo.
Para saber mais, entre no docs do Tailwind
Caso você tenha qualquer dúvida, sinta-se livre para me contatar por aqui ou pelo Twitter
Top comments (3)
Muito boa sua avaliação sobre o Tailwind.
Parabéns
Opa blz Pedro, primeiro parabéns pelo post. Agora uma pergunta pois sou iniciante me HTML, CSS e JS. Para usar o Tailwind em um projeto somente com HTML,CSS e JS é viável? Você aconselha? Obrigado e novamente parabéns;
Oi Emerson,
Não é muito recomendado. O Tailwind é relativamente pesado (são milhares de classes CSS) e utiliza ferramentas instaladas juntas com o pacote no node.js para manter apenas as classes que você utilizar.
De qualquer maneira, ainda é possível utilizar por meio da CDN. Basta adicionar essa tag no html:
Abraços