Tailwind CSS 2.0. A nova versão do framework CSS queridinho do momento

2 months ago
Share this and help me to spread the word! 🤓

It's real, and it's spectacular.

Foi assim, cheio de pompa e elegância que a nova versão do Tailwind CSS foi apresentada.

Antes de prosseguirmos, vale ressaltar que o Tailwind é um framework utility first. O que causa bastante controvérsia na comunidade dev.

Tem quem critica e depois muda de ideia, tem quem gosta e tem quem gosta muito!

Eu, particularmente, gosto muito e já utilizo em vários projetos antes mesmo da versão 1.0 - inclusive este blog usa Tailwind.

O próprio Adam Wathan, criador do framework, escreveu um longo e detalhado artigo explicando o seu ponto de vista sobre o assunto.

CSS Utility Classes and "Separation of Concerns"

Realmente a nova versão trás muitas novidades (Dark Mode 😍), como seria de se esperar em uma major. Inclusive um novo - e muito bonito - web site.

Lista de novidades da versão 2.0 do Tailwind CSS

  • Paleta de cores totalmente nova, com 220 cores no total e um novo fluxo de trabalho para criar seus próprios esquemas de cores
  • Suporte ao modo escuro, tornando mais fácil do que nunca alterar dinamicamente o seu design quando o modo escuro está ativado
  • Breakpoint extra largo 2XL, para projeto de 1536px e acima
  • Novos utilitários de outline, que são quase tão bons como se fossem apenas tornar o outline-radius uma coisa real
  • Estilos de formulário amigáveis, uma nova redefinição de formulário que torna mais fácil personalizar os elementos do formulário (até mesmo caixas de seleção) apenas com utility-classes
  • Altura de linha padrão por tamanho de fonte, porque se não podemos tornar ilegal o uso de uma altura de linha de 1,5 com uma fonte de 48px, devemos pelo menos torná-la não a padrão
  • Espaçamento estendido, tipografia e escalas de opacidade, para ajustar as coisas no nível micro, causando um impacto ainda maior com manchetes enormes e para quando a opacidade-25 não for suficiente e a opacidade-50 for demais
  • Use @apply com qualquer coisa, incluindo responsivo, foco e outras variantes
  • Novos utilitários de overflow de texto, para controlar as coisas com mais precisão do que você pode com o truncate sozinho
  • Estenda as variantes, para que você possa habilitar variantes extras, como o foco visível, sem redeclarar a lista inteira ou pensar sobre a ordenação
  • Group-focus e focus-within por padrão, porque você estava ativando-os em todos os projetos de qualquer maneira
  • Duração de transição padrão e curva de atenuação, então você só precisa adicionar 17 classes para fazer um botão em vez de 19 😂😂😂
  • Incompatibilidade com o IE11, então você pode dizer ao seu chefe "desculpe, chefe, está fora de minhas mãos, culpe o Tailwind"

Você pode conferir todas as novidades acessando em https://blog.tailwindcss.com/tailwindcss-v2

E você? Usa o Tailwind? Gosta? Odeia? Deixe suas opiniões nos comentários!