November 19, 2020
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!