Carregando...

Vale a pena tentar Tailwind CSS em 2024?

Este artigo foi publicado originalmente em .cult por Luis Minvielle. .cult é uma plataforma comunitária para desenvolvedores com sede em Berlim. Escrevemos sobre tudo relacionado à carreira, fazemos documentários originais e compartilhamos muitas outras histórias incontáveis ​​de desenvolvedores de todo o mundo.

Os desenvolvedores que finalmente conseguem um emprego fazendo o que amam – codificação – frequentemente enfrentam um quebra-cabeças: programar para ganhar a vida é fantástico, de fato, mas é tão agradável quando você está preso fazendo a mesma tarefa repetidamente? Porque nós entendemos: escrever CSS é supostamente divertido, mas tente fazê-lo repetidamente.

Felizmente, os desenvolvedores web abandonam constantemente ferramentas e estruturas que fazem com que as tarefas do dia a dia pareçam menos uma dor de cabeça. Um kit de ferramentas que ganhou atenção significativa recentemente é CSS do vento favorável.

Sua abordagem para a construção de interfaces de usuário promove uma estrutura CSS que prioriza a utilidade que permite estilizar facilmente seus sites sem a necessidade de escrever código CSS personalizado. Esse Código aberto O favorito do GitHub fornece um conjunto de classes utilitárias pré-construídas que você pode aplicar diretamente em seu código HTML para obter diferentes estilos e layouts em qualquer design. Parece promissor se você quiser parar de se perguntar se você adora programar.

O

Os últimos rumores do cenário tecnológico da UE, uma história do nosso sábio e velho fundador Boris e alguma arte de IA questionável. É grátis, toda semana, na sua caixa de entrada. Inscreva-se agora!

Mas vale a pena tentar em 2024? Vamos mergulhar nos detalhes e explorar seus recursos, benefícios, desvantagens e como ele ainda é válido para os desenvolvedores hoje.

O que é Tailwind CSS?

Tailwind CSS é uma estrutura CSS utilitária que fornece um conjunto abrangente de recursos pré-construídos Aulas para acelerar o processo de desenvolvimento. Ao contrário das estruturas CSS tradicionais que vêm com componentes e estilos pré-projetados, o Tailwind CSS se concentra em fornecer pequenas classes utilitárias de propósito único que podem ser combinadas para criar estilos personalizados, proporcionando mais flexibilidade e controle sobre a aparência de um site. Os web designers on-line o chamam de estrutura CSS enxuta e baseada em utilitários, destinada ao desenvolvimento rápido de UI.

A equipe por trás do Tailwind CSS ainda está adicionando recursos e lançou recentemente seu Just-In-Time (JIT) para obter tempos de construção extremamente rápidos. Isso significa que o kit de ferramentas economiza tempo em duas frentes: economiza seu tempo e o tempo da pessoa por trás da tela (sem testar sua paciência).

Os desenvolvedores podem compor essas classes para criar componentes e layouts. Por exemplo, você pode definir a cor do texto, a cor do plano de fundo, o preenchimento, a margem e muito mais simplesmente adicionando classes aos seus elementos HTML. Essa abordagem modular facilita ajustar e dimensionar seus designs sem escrever CSS personalizado e repetitivo (ao contrário de Inicializaçãoque visa fornecer uma aparência familiar e consistente em diferentes projetos).

Quem está usando Tailwind CSS em 2023? Para que é ótimo?

Mesmo que alguns canais do YouTube tenham recentemente mergulhado nessa estrutura por serem muito inventados, o Tailwind CSS é tudo menos uma moda passageira. Em 2023, essas organizações usam Tailwind CSS para seus sites:

  • O espelho
  • OpenAI e ChatGPT (espero que tenham garantido royalties aqui)
  • Shopify
  • Tear
  • A beira
  • Microsite de Festas do MrBeast
  • Site de marketing do Microsoft .NET (meio divertido)

Além disso, de acordo com os insights da indústria, mais de 400 empresas, alguns deles ainda mais voltados para a tecnologia do que a lista acima, estão usando Tailwind CSS. A adoção por diversas empresas sugere duas coisas: primeiro, a estrutura pode atender a diversas necessidades, desde sites de mídia até plataformas de comércio eletrônico. Em segundo lugar, a sua adoção por esses pesos pesados ​​da indústria indica um nível de precisão que pode não ser adequado para iniciantes. A partir de um front-end perspectiva, o fato de a OpenAI estar usando-o ressalta o quão versátil e respeitado o Tailwind CSS é em 2023, mas também sugere uma curva de aprendizado mais acentuada.

O fato de este kit de ferramentas ser destinado a desenvolvedores de nível médio já é evidente. No entanto, devido à sua aceitação diversificada, pode ser um desafio identificar a aplicação específica do Tailwind. É especificamente bom para o comércio eletrônico? Ou para sites de marketing? Não é óbvio, pois parece um instrumento versátil. Isso é uma coisa boa.

Integrações

Tailwind CSS integra-se perfeitamente com várias estruturas e ferramentas de front-end. Combina bem com populares Estruturas JavaScript como Reagir, Vue.jse Angular. Além disso, Tailwind CSS pode ser facilmente integrado a ferramentas de construção como Webpack e PostCSS, garantindo um fluxo de trabalho de desenvolvimento elegante e sites mais enxutos. O trecho de código React a seguir deve renderizar um botão azul com texto branco quando incluído em um aplicativo React que, bem, também possui um CSS Tailwind configurado.

Código do vento favorável

Vantagens do Tailwind CSS em 2024

Tailwind CSS oferece vários benefícios que o tornam uma escolha atraente para desenvolvedores em 2024:

  • Design responsivo: em primeiro lugar, fornece uma abordagem altamente personalizável por meio do arquivo tailwind.config.js, permitindo aos desenvolvedores definir cores, pontos de interrupção, fontes e muito mais.
  • Consistência: com seu sistema de design unificado, o Tailwind garante a consistência geral do front-end em todas as páginas e mantém um design coeso.
  • Desenvolvimento rápido: uma das vantagens marcantes do Tailwind CSS é sua capacidade de acelerar o desenvolvimento. Ao aproveitar classes de utilitários predefinidas, os desenvolvedores podem construir componentes de UI rapidamente, sem a necessidade de CSS personalizado (gostaríamos de saber quanto tempo você levou para construir um site com Tailwind).
  • O repositório Tailwind UI: Tailwind UI é uma coleção de snippets HTML projetados profissionalmente, pré-construídos e totalmente responsivos que podem ser usados ​​em projetos Tailwind CSS. É executado pela mesma equipe por trás do Tailwind CSS e fornece uma ampla gama de componentes de UI, modelos e exemplos que os desenvolvedores podem usar como ponto de partida para seus projetos de desenvolvimento web. A UI do Tailwind tem como objetivo ajudar os desenvolvedores a construir interfaces de usuário funcionais e de boa aparência, sem escrever código repetitivo.
  • O modo JIT: O modo JIT é um compilador que gera estilos CSS sob demanda conforme você cria seus modelos, em vez de gerar todas as classes antecipadamente no momento da construção inicial. No modo JIT, o Tailwind analisa seus modelos HTML e gera apenas os estilos CSS necessários com base nas classes usadas em sua marcação – proporcionando tempos de construção mais rápidos.

Desvantagens do Tailwind CSS em 2023

Embora o Tailwind CSS traga inúmeras vantagens, ele também recebeu algumas críticas:

  • Curva de aprendizado: Para desenvolvedores novos no Tailwind CSS, pode haver uma longa curva de aprendizado à medida que eles se acostumam com a abordagem baseada em classe de utilitário. Isto pode retardar o desenvolvimento inicial até que a familiaridade seja alcançada.
  • ‘Criatividade de design limitada’: embora o Tailwind CSS ofereça flexibilidade, especialmente em comparação com outras estruturas populares como Bootstrap, alguns designers e desenvolvedores podem considerá-lo restritivo para designs altamente criativos ou não convencionais. Admito que este ponto é um pouco matizado. Embora o Tailwind priorize a utilidade, ele realmente não limita a criatividade do design. É flexível o suficiente para permitir que os desenvolvedores construam quase tudo. Contudo, o desafio pode ser pensar dentro das restrições da classe de utilidade. É mais uma questão de adaptação a uma nova mentalidade do que uma limitação real no design criativo.
  • Tamanhos de arquivo grandes: Tailwind CSS pode gerar arquivos CSS grandes, o que pode afetar o tempo de carregamento da página. A otimização cuidadosa e a agitação das árvores são necessárias para mitigar esse problema. Ainda assim, sua integração com o PurgeCSS pode ajudar os desenvolvedores a obter arquivos menores e mais rápidos.

Vale a pena notar que com o advento do modo JIT, as construções de desenvolvimento são muito mais enxutas porque apenas as classes usadas são geradas dinamicamente.

Ainda assim, muitos destes benefícios e desvantagens são apenas relativos. É por isso que sugerimos comparar o Tailwind CSS com outros projetos, como o mundialmente famoso Bootstrap.

Tailwind CSS vs. Bootstrap: como funciona?

Quando os desenvolvedores consideram uma nova ferramenta de estilo, o Bootstrap normalmente serve como padrão ouro para comparação. Uma estrutura baseada em componentes, o Bootstrap vem com componentes prontos para uso, como modais, botões e barras de navegação. É o ‘pegar e usar’ do mundo CSS, priorizando velocidade e uma aparência unificada. Em 2023, você poderá saber imediatamente quando um site está usando os ícones brilhantes do Bootstrap.

O Tailwind, por outro lado, adota uma abordagem que prioriza a utilidade. Em vez de componentes pré-projetados, você obtém classes utilitárias atômicas. A ideia? Crie sua UI peça por peça, garantindo mais flexibilidade aos designers e desenvolvedores. Então, se estiver no Bootstrap, um botão pode ser determinado como no Tailwind, será:

Código do vento favorável

Isso traz a questão da customização. Embora o Bootstrap seja personalizável usando variáveis ​​SCSS, desviar-se significativamente de sua aparência padrão exige estilos superiores, às vezes levando à ‘fadiga do Bootstrap’, onde cada site parece assustadoramente semelhante.

A personalização, por outro lado, é o playground do Tailwind. O arquivo tailwind.config.js é sua tela, permitindo designs personalizados. Você quer um tom específico de azul ou um ponto de interrupção exclusivo? Os desenvolvedores podem defini-lo com muita facilidade. Então vá para o seu escolha de paleta sites e continue com isso.

Código do vento favorável

Bootstrap, com sua natureza bem documentada e baseada em componentes, geralmente serve como a primeira parada para entusiastas de CSS iniciantes. Seus componentes prontos para uso, como barras de navegação responsivas, significam um rápido desenvolvimento. No entanto, essa conveniência às vezes contribui para o inchaço do projeto, afetando o desempenho.

Em contraste, Tailwind CSS é semelhante à elaboração com ferramentas de precisão. Em vez de componentes pré-estilizados, são apresentadas classes de utilitários granulares. Por exemplo, com o Bootstrap, você pode usar uma única classe para um botão, enquanto no Tailwind você definiria meticulosamente sua aparência com uma combinação de utilitários, como cor do texto, plano de fundo e preenchimento. É um sistema que pode parecer complicado para iniciantes, mas oferece aos desenvolvedores front-end experientes um nível de controle incomparável. Além disso, a integração do Tailwind com LimparCSS ajuda a remover CSS não utilizado para uma construção rápida e econômica.

Essencialmente, embora o Bootstrap seja voltado para designs rápidos e uniformes, o Tailwind é ótimo para desenvolvedores experientes que buscam precisão em seus designs. Ambas são escolhas legítimas em 2023.

Um caso de uso real para Tailwind CSS em 2023

Graças ao testemunho de um especialista em front-end, podemos analisar um caso de uso em que Tailwind CSS ajudou o negócio online mais identificável: um SaaS. Durante a construção NodCards, uma plataforma de cartão de visita digital, o desenvolvedor se deparou com um desafio: permitir que os usuários selecionassem dinamicamente qualquer cor primária de design para seus cartões. Esta escolha teve que ser incorporada sem alterar a marcação ou folha de estilo do site.

Tailwind CSS, em combinação com seu compilador JIT (vá para o site oficial do Tailwind para aprender como habilitá-lo), apresentou ao desenvolvedor uma solução alternativa. No entanto, a aplicação de cores dinâmicas não era simples. Em vez de confiar apenas nas classes utilitárias do Tailwind, o desenvolvedor utilizou o poder das variáveis ​​CSS e funções auxiliares.

Código do vento favorável

Esta função auxiliar converte uma cor HEX em RGB, o que auxilia na criação de variáveis ​​CSS para a cor primária dinâmica. Depois de convertidos, esses valores RGB são integrados ao Tailwind CSS para produzir tons variados, garantindo flexibilidade com camadas de opacidade. Por exemplo, a cor do texto do nome de um usuário pode ser definida dinamicamente:

Código do vento favorável

Da mesma forma, os botões podem ser estilizados para usar a cor primária com opacidades variáveis ​​e até mesmo ajustar para questões de acessibilidade ao passar o mouse:

Código do vento favorável

Com o Tailwind CSS, a NodCards conseguiu oferecer aos usuários a flexibilidade de personalizar o design de seus cartões de forma dinâmica, garantindo estética, acessibilidade e um site ágil.

Então, em conclusão

Visto pelas lentes de sites de alto perfil e casos de uso do mundo real, fica claro que Tailwind CSS é mais do que apenas uma tendência passageira. Se você está em dúvida sobre adotá-lo, lembre-se de que a aptidão geralmente começa com a experimentação. Então, mergulhe, suje as mãos com o Tailwind e deixe suas criações falarem por si.