Tailwindcss? Eu vou passar

Recentemente, usei o Tailwindcss em um projeto e quer saber? Foi uma experiência reveladora, para dizer o mínimo.

Alguns de vocês podem estar se perguntando: o que é Tailwindcss?

Tailwind CSS se destaca como a biblioteca CSS de crescimento mais rápido até o momento. Tornou-se rapidamente uma ferramenta essencial para desenvolvedores front-end. Muitos desenvolvedores front-end estão utilizando-o em projetos de grande escala, encontrando problemas mínimos. Seus aprimoramentos no desenvolvimento e design de sites e aplicativos da web são inegavelmente notáveis.

Então qual é o problema? Por que o título diz '“ Tailwindcss? Não, obrigado ”?

Este título sugere que pode haver casos em que Tailwind CSS pode não ser a escolha ideal para seus projetos, apesar de sua excelência. Por que isso poderia ser? Existe uma resposta. No entanto, antes de nos aprofundarmos na explicação, vamos estabelecer as bases para esse exame da tecnologia.

O que há com todos os CSSs?

Antes de entrarmos no Tailwindcss e suas complexidades de desenvolvimento, devemos satisfazer alguns pré-requisitos.

O que é CSS?

CSS significa Cascading Style Sheets. A melhor definição para CSS na minha opinião vem de techterms.com

“CSS é uma linguagem de folha de estilo usada para formatar conteúdo em páginas da Web HTML. As folhas de estilo CSS podem definir a aparência e formatação de texto, tabelas e outros elementos separadamente do próprio conteúdo. Os estilos podem ser encontrados no arquivo HTML de uma página da Web ou em um documento separado referenciado por várias páginas da Web”.

Em poucas palavras: CSS é a linguagem de estilo. Você usa CSS em elementos HTML para tornar sua página da web ou aplicativo da web com uma aparência excelente.

O que é o Tailwindcss?

Nas palavras da própria equipe do Tailwindcss , o Tailwindcss é “ uma estrutura CSS baseada em utilitários, repleta de classes como flex , pt-4 , text-center e rotate-90 que podem ser compostas para criar qualquer design, diretamente em sua marcação ”.

Isso significa essencialmente que o CSS tailwind usa procedimentos e operações CSS originais e os torna mais simples de fazer e implementar.

Já discutimos os fundamentos do CSS e do Tailwind CSS. Agora, vamos nos aprofundar e examinar como o CSS do Tailwind funciona na prática, juntamente com seus correspondentes CSS. Essa exploração acabará por nos levar à conclusão a que cheguei durante meu projeto envolvendo Tailwind CSS.

Minha conclusão é que Tailwind CSS é mais adequado para projetos de front-end maiores e mais complexos. No entanto, a escolha padrão para a maioria das situações ainda deve ser o CSS "baunilha". Em outras palavras, usar CSS em sua forma mais pura geralmente é mais vantajoso para a maioria dos indivíduos e cenários em comparação com qualquer biblioteca adicional, seja Tailwind CSS ou outras.

Diferenças entre CSS e Tailwindcss

Qual é a aparência do Tailwindcss? Vamos comparar criando um equivalente de CSS vanilla e, em seguida, um equivalente de Tailwindcss.

Vamos detalhar o que está acontecendo no texto acima. É um trecho do HTML 5 e estamos construindo um botão.

Para construir o botão, nós o configuramos por meio de “ divs ” - essencialmente pequenos contêineres para inserir coisas para alterar nosso site ou aplicativo da web. Damos a cada div sua própria “ classe ” para que possamos fazer referência a esse elemento específico mais tarde em nosso arquivo CSS separado. Embora você também possa dar aos divs seus próprios “ ids ”. Você pode fazer alterações CSS “ in-line ”, o que significa que você pode colocar CSS diretamente no arquivo HTML, mas a maioria tende a evitar isso por uma questão de organização.

No arquivo CSS, como ficaria nosso código para editar o botão?

No código acima, estamos interagindo com a classe de botão no trecho de HTML. A maneira como você torna seu arquivo CSS ciente de suas classes HTML é com um ponto no início do próprio nome da classe. Abaixo disso, em ordem, alinhamos o botão ao centro da div com “ align-items ”. Abaixo do item de alinhamento está o “ clipe de fundo ” que define até que ponto a “ cor de fundo ” se estenderá e não se estenderá. A “ borda ” é a espessura dos lados do botão e o raio da borda é a curvatura das bordas. Tudo o que acabamos de mencionar contribui para desenvolver o estilo do botão. Como podemos ver, os estilos CSS originais parecem bastante simples. Como o Tailwindcss lidaria com o mesmo caso?

Espere o que? Acabamos de colocar um código parecido com CSS em um arquivo HTML? sim nós fizemos. O que você está vendo é o equivalente aos exemplos de código anteriores em Tailwindcss. Na verdade, esse é um dos atributos mais exclusivos do Tailwindcss. Ao usar o Tailwindcss, você não coloca seu código CSS separado em um arquivo diferente. Todo o seu código Tailwindcss vai diretamente para o seu arquivo HTML. Como dissemos antes, os desenvolvedores tradicionalmente evitam a codificação CSS in-line . Com Tailwindcss, a codificação em linha não é mais uma opção, é quase necessária. O Tailwindcss é totalmente implementado através da identificação de classes .

Agora, o que o código acima faz? ele faz exatamente o que o código CSS original faz, embora um pouco diferente.

Vamos dar uma outra olhada no CSS regular versus a contraparte do Tailwindcss.

Na imagem acima, estamos em um documento HTML5 importando uma imagem de chocolate na classe “ card-img ”. Vamos ver como é o CSS correspondente.

O código CSS acima é semelhante ao anterior. Não há necessidade de extrapolação muito aprofundada. Estamos definindo a aparência dos cartões de chocolate. Vamos agora ver a variante Tailwindcss muito mais interessante.

O código acima é o equivalente ao Tailwindcss. É muito mais simples e elegante, mas exige muito mais esforço para saber o que tudo significa e como posicionar as declarações. Então, isso é uma vantagem sobre o CSS tradicional?

A natureza do Tailwindcss o torna muito confuso. Todo o seu código, HTML e CSS, estará em um arquivo e será longo e aparentemente lotado. Isso dificulta o desenvolvimento.

Quais são as principais desvantagens do Tailwindcss?

• Curva de aprendizado íngreme que leva tempo para se acostumar.
• Tem que fazer componentes de classe personalizados. (Isso pode acrescentar muito em um projeto longo).
• Confuso porque HTML e estilo são misturados

Quais são as suas principais vantagens ?

• Altamente personalizável

• Desenvolvimento mais rápido

• Palavras e padrões consistentes, independentemente do que está sendo adicionado ou editado.

  
  

Vimos exemplos de Tailwindcss e agora conhecemos as principais vantagens e desvantagens. Mas, quão popular é?

Ele foi adotado e proliferado entre desenvolvedores novos e antigos.

Vivian Guillen, do tailwindweekly.com, afirmou que Tailwindcss ganhou 4,5 milhões de downloads semanais em 19 de novembro de 2022. Enquanto escrevo isso, se você acessar npmjs.com e pesquisar por Tailwindcss, ele terá 336 milhões de downloads. Desde seu lançamento, há 5 anos, é uma média de 184.110 downloads por dia. Uma quantidade incrível de downloads.

Desacelerando no Tailwind

Anteriormente, no início deste artigo, escrevi: “ Pode haver um momento ou momentos em que o Tailwindcss não seja a solução ideal para seus projetos”. Por que eu escrevi isso? e como isso se relaciona com o título? “Vento de cauda? Eu vou passar ".

O Tailwindcss é popular globalmente entre quase todos os desenvolvedores de front-end, parece mais fácil de implementar do que o CSS tradicional e oferece mais capacidade de personalização do que outras tecnologias de seu tipo. Caramba, meu uso até inspirou este artigo. Então, por que ainda duvido? Porque eu usei é claro .

Tailwindcss é tão bom quanto todos afirmam ser e muito mais. Da mesma forma, é tão ruim quanto as pessoas afirmam que também é. A natureza do Tailwindcss torna complicado trabalhar com projetos de curto a médio prazo, a curva de aprendizado dificulta completamente o seu desenvolvimento, a insistência em fazer componentes personalizados, etc. Tudo isso torna o Tailwindcss insuportável, A CURTO PRAZO . Só a curto prazo!

Isso significa que o Tailwind CSS deve ser reservado para projetos extensos e intrincados realizados por desenvolvedores e empresas. Para projetos mais curtos, é aconselhável aderir ao CSS convencional. Isso evita que suas habilidades em CSS enfraqueçam e evite se tornar excessivamente dependente de estruturas de atalho como Tailwind CSS. Por que você deveria acreditar em mim? Eu me desafiei a empregar Tailwind CSS em um projeto menor, e isso realmente enfatizou por que é mais adequado para empreendimentos substanciais e duradouros. Estou animado para me aprofundar em outros frameworks CSS e talvez até compor artigos sobre eles!

Você pode descobrir se me inscrever e nos veremos em breve ;)