Tailwind CSS: uma API e uma estrutura CSS que priorizam o utilitário para um design rápido e responsivo

Estrutura CSS do Tailwind

Embora eu esteja profundamente envolvido com tecnologia diariamente, não fico tanto tempo quanto gostaria para compartilhar as integrações e automações complexas que minha empresa implementa para os clientes. Além disso, não tenho muito tempo para descobertas. A maioria das tecnologias sobre as quais escrevo são empresas que buscam Martech Zone cobrindo-os, mas de vez em quando - especialmente via Twitter - vejo alguns rumores em torno de uma nova tecnologia que preciso compartilhar.

Se você trabalha com web design, desenvolvimento de aplicativos móveis ou mesmo apenas configurou um sistema de gerenciamento de conteúdo, provavelmente lutou com as frustrações de estilos concorrentes em várias folhas de estilo. Mesmo com as incríveis ferramentas de desenvolvimento criadas em cada navegador, rastrear e limpar CSS pode exigir muito tempo e energia.

Frameworks CSS

Nos últimos anos, os designers fizeram um trabalho incrível ao lançar coleções de estilos que são preparados e prontos para uso. Essas folhas de estilo CSS são mais conhecidas como CSS Frameworks, tentando acomodar todos os diferentes estilos e recursos responsivos para que os desenvolvedores possam apenas fazer referência a uma estrutura em vez de construir um arquivo CSS do zero. Algumas estruturas populares são:

  • Bootstrap - uma estrutura que evoluiu ao longo de uma década, introduzida pela primeira vez pelo Twitter. Ele oferece inúmeros recursos. Ele tem desvantagens, exigindo SASS, difícil de overwreied, dependente de JQquery e é muito pesado para carregar.
  • Bulma - uma estrutura limpa que é amigável ao desenvolvedor e não depende de JavaScript.
  • Fundação - um framework CSS mais genérico e utilizável que possui toneladas de componentes que são facilmente personalizáveis. Além disso, há Fundação para Email e IU de movimento para animações.
  • Kit de IU - uma combinação de HTML, JavaScript e CSS para desenvolver seu front-end de forma rápida e fácil.

Estrutura CSS do Tailwind

Enquanto outras estruturas fazem um ótimo trabalho em acomodar elementos populares da interface do usuário, o Tailwind usa uma metodologia conhecida como CSS Atômico. Resumindo, o Tailwind engenhosamente organizou os nomes das classes usando linguagem natural para fazer o que eles dizem que fazem. Portanto, embora o Tailwind não tenha uma biblioteca de componentes, a capacidade de construir facilmente uma interface poderosa e responsiva apenas referenciando nomes de classes CSS é elegante, rápida e incomparável.

Aqui estão alguns exemplos realmente excelentes:

Grades CSS

css coluna início grades colunas

Gradientes CSS

gradientes css

CSS para suporte ao modo escuro

modo escuro css

Tailwind também tem um fantástico extensão disponível para VS Code para que você possa identificar e inserir classes facilmente do editor de código da Microsoft.

Ainda mais engenhoso, o Tailwind remove automaticamente todos os CSS não utilizados ao construir para produção, o que significa que seu pacote CSS final é o menor possível. Na verdade, a maioria dos projetos do Tailwind envia menos de 10kB de CSS para o cliente.

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.