🎨 Tailwind CSS - Amor ou ódio
Vantagens e desvantagens na utilização do Tailwind para estilização de páginas
Uma vez ouvi uma frase de um professor que demonstra a relação entre devs e o Taildwind:
Não existe meio termo com o Tailwind, ou você ama, ou você odeia.
E analisando a comunidade é bem assim que acontece mesmo. E eu era uma das pessoas que odiava. Se tinha um evento onde o projeto seria construído com Tailwind, eu adaptava o meu para utilizar algum outro (CSS puro ou Styled components) só para não ter que usa-lo.
Mudança de pensamento
Um certo dia, minha esposa disse que queria ir em um restaurante japonês, pois fazia tempo que ela não comia, e eu disse que iria, porém ia comer outra coisa, pois eu não gostava de comida japonesa. Eis que ela me faz o seguinte questionamento:
Como você sabe que não gosta, se nunca comeu ?
Fiquei com isso na cabeça, e no projeto seguinte decidi dar uma chance ao Tailwind, e o ódio se transformou em amor.
Uma visão sobre o Tailwind
O Tailwind é uma biblioteca para estilização in-line utilizando classes para tal. Ou seja, você estiliza uma tag ou componente no momento que cria os mesmos, adicionando todas as propriedades e valores css dentro da propriedade class da tag. Exemplo:
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
</div>
</figure>
É possível notar que o Tailwind possui seus próprios valores css, mas nada muito diferente do css puro. Aqui está a documentação, que contém as propriedades css que ele utiliza: https://tailwindcss.com/docs/installation
Porém o foco deste Tab não é te ensinar a usar o Tailwind, mas sim listar suas vantagens e desvantagens.
Principais vantagens
A maior vantagem em se utilizar o Tailwind é a produtividade na hora de escrever códigos. O Tailwind elimina a necessidade de ter que ficar fazendo o screen swap ou seja, ficar toda hora trocando entre a tela do arquivo css e do arquivo html/jsx, e isso diminui absurdamente o tempo para construir a interface.
Outro ponto importante é que você não precisa mais ficar pensando em nome de classes, para não haver conflito entre estilos, pois o próprio Tailwind já faz isso, e você fica livre para se preocupar com a lógica do programa em si.
Desvantagens
É fácil indentificar a desvantagem analisando o exemplo: O código fica "sujo". Esse é o maior motivo do porque as pessoas odeiam o Tailwind, pois acaba dificultando a leitura do código, e consequentemente a manutenção do mesmo. Além disso, por mais que a curva de aprendizagem seja pequena, algumas propriedades são bem específicas do Tailwind, e leva um certo tempo até se acostumar.
Na minha opinião, analisando as vantagens e desvantagens, o Tailwind é muito relevante quando você precisar entregar para o cliente um protótipo da tela, e o prazo está apertado, ou então em um site que ficará disponível apenas durante um período (site para se inscrever em uma feira, por exemplo), pois ele reduz muito o tempo de desenvolvimento. Dificilmente você verá um projeto que foi constrúido utilizando outra alternativa para a estilização da página migrando para Tailwind, geralmente serão projetos novos que o utilizarão.
Deixe aqui sua opinião/sugestão a respeito do assunto. No mais, minha dica se você, assim como eu no passado, critíca o Tailwind sem nunca ter utilizado: Dê uma chance a ele. Abraços!!
Fonte: https://tailwindcss.com/