Executando verificação de segurança...
7

🎨 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!!

Carregando publicação patrocinada...
2

Comecei a me aventurar neste modelo de estilização a pouco tempo mas ainda estou tentando me acostumar com o código "sujo", a utilização de uma tela grande e css modules evita os swaps e conflitos, mas acredito que para esboço e uma ótima ferramenta e agiliza muito um mvp

1
1

Sim, no começo é normal ter uma certa aversão, mas depois que você acostuma facilita muito o desenvolvimento. Acho que o pessoal as vezes não enxerga essa vantagem de tornar o processo mais rápido, e ser perfeito para a criação de um mvp, e por isso acabam criticando. Esse foi uma das motivações que tive ao fazer o post: O Tailwind cumpre perfeitamente o seu objetivo.

2

Tailwind permite desenvolvedores back-end como eu a tirarem projetos do chão com "hacky" css e ir aprendendo ao longo do caminho.

Comecei fazendo componentes de forma incorreta mas acredito que hoje faço certinho 😅

E além disso, é muito prático.

Só uma dúvida. Você utilizou esse emoji no título porque viu no artigo de sugestão do emoji-pattern ou porque pensou que era o mais apropriado? Fiquei interessado hahaha

1

Boa, não tinha pensando nesse ponto também, de permitir que outras pessoas que não são da área desenvolverem um componente estilizado sem precisar aprender do zero.

Sim, é por conta do post do emoji-pattern, inclusive parabéns pela idéia, pretendo utiliza-lo e ajudar a compartilhar.

2

Boa, não tinha pensando nesse ponto também, de permitir que outras pessoas que não são da área desenvolverem um componente estilizado sem precisar aprender do zero.

Sim! Tenho um projeto que ta ficando bem grande e estou tocando sozinho. Honestamente, sem tailwind acho que eu não teria chegado tão longe. O front sempre era uma pedra no meu sapato. (No caso é um clone do AirBNB)

Sim, é por conta do post do emoji-pattern, inclusive parabéns pela idéia, pretendo utiliza-lo e ajudar a compartilhar.

Valeu! Perguntei porque fiquei pensando: "Nossa, se ele usou sem consultar então com certeza a ideia faz sentido" já que teria sido intuitivo, mas fico feliz do mesmo jeito 😅

2

Na minha opinião a adoção dessa Lib está mais conectada com o tamanho do projeto, principalmente em projetos com muitas linhas de código, acaba realmente se tornando um pouco exaustívo a procura de determinados erros que podem ocorrer na estilização. Mas quando se trata de produtividade para projetos com menos linhas a adoção é bem-vinda!

1

Faz todo sentido mesmo levar em consideração o tamanho do projeto, e o quanto ele tem potencial para escalar, para avaliar se faz sentido usar ou não. Excelente ponto!

2

Com certeza o tailwind deixa o código mais "sujo" e de certa forma torna a manutenção mais complicada, mas de outro lado tem a produtividade muito acelerada!

Ótimo post!

1
2
1
1

Isso! No começo torci meu nariz, mas era pura ignorancia. Hoje não utilizar tailwind me causa a mesma sensação de não usar vim 😅 parece que tomei um hit na minha produtividade