5 motivos para começar usar o TailwindCSS

Tudo na vida passa, e parece que chegou a hora do Bootstrap passar o bastão de seu reinado como a melhor estrutura CSS para desenvolvedores front-end.

Ouso dizer que o TailwindCSS é o néctar dos deuses, a cerveja gelada no domingo e o pão de queijo no café da tarde. Tá bom, como um bom mineiro, sei que nada se iguala ao pão de queijo quentinho com café, então, retirem esse último item.

Se você ainda não conhece ou não deu uma chance pra essa maravilhosa biblioteca, esse post vai mudar sua vida.

Nunca mais perca tempo criando nome para classes

Se você, assim como é fã da praticidade e odeia perder tempo pensado em nome de classes css para seus componentes, seus problemas estão prestes a acabar.

Graças ao conceito de Utility-First você não precisará sequer escrever mais css, isso porque o Tailwind possui um enorme conjunto de classes utilitárias que adicionam preenchimento, cores, bordas e todas as outras propriedades que o css oferece.

Aqui está um exemplo de como criar de maneira extremamente rápida um pequeno quadrado preto.

Eu estava um pouco com receito de mudar para o Tailwind, até que no começo de 2021 decidi dar uma chance e foi amor a primeira vista. 

Se quiser conhecer e brincar um pouco com o Tailwind, é só dar um pulo no playground oficial do TailwindCSS: https://play.tailwindcss.com

Responsividade

Criar designs responsivos voltados para dispositivos móveis com TailwindCSS é muito fácil. Cada classe de utilitário pode ser usada em conjunto com um modificador responsivo. Dê uma olhada no CSS abaixo.

Se você visualizar o HTML acima em uma tela de tamanho médio (768px), verá um quadrado maior. Se você visualizá-lo em uma tela menor (menos de 768 px), verá um quadrado menor.

Aproveitar as classes responsivas permite que você crie designs incríveis para qualquer tamanho de tela. Certifique-se de verificar a documentação responsiva do Tailwind para saber mais .

Paleta de Cores modernas e lindas

Tailwind tem uma bela paleta de cores, incluindo 8 cores básicas com 10 tonalidades diferentes.

Podemos usar essas cores em qualquer elemento do nosso site. Podemos aplicar uma cor ao nosso plano de fundo, texto, borda e muito mais. Aqui está o nosso elemento quadrado com um fundo azul e texto branco.

Totalmente Personalizável

Tudo no Tailwind é totalmente configurável. Você pode substituir, estender e adicionar suas próprias classes de utilitário. Toda essa customização reside em um arquivo chamado tailwind.config.js.

Este arquivo de configuração normalmente fica na raiz do seu projeto. Se você modificar seu arquivo de configuração, poderá reconstruir seus novos estilos e aplicá-los ao seu site.

A quantidade de personalizações é infinita e você também pode se beneficiar dos vários plug-ins disponíveis para o Tailwind .

Arquivos CSS pequenos

O Tailwind tem várias classes de utilitários, o que significa que o tamanho do arquivo inicial é muito grande; no entanto, o Tailwind utiliza PurgeCSS para verificar seus arquivos e detectar as classes que você está usando. Isso significa que seu arquivo CSS final conterá apenas as classes de utilitário que você está usando. Isso resultará em um tamanho de arquivo CSS muito pequeno!

Tamanhos de arquivo CSS menores resultarão em carregamentos de página mais rápidos, uma melhor experiência do usuário e melhor SEO.

Se você ainda não entrou no movimento do Tailwind, recomendo enfaticamente que calce as botas e sele 🐴 porque o Tailwind dominará a arena do CSS nos anos que virão.