Vários meses atrás (no momento em que este artigo foi escrito), Tailwind CSS abriu o código-fonte de seu trabalho no Tailwind CSS v4.0. (Você pode encontrá-lo no GitHub aqui).

Recentemente, o Tailwind anunciou um beta público para o Tailwind CSS 4, e neste artigo abordarei os destaques da nova versão. Então vamos começar!

Mudanças Gerais na Estrutura

Tailwind passou por uma reformulação em seu mecanismo que melhora drasticamente o desempenho. Compilações completas são até 5x mais rápidas, compilações incrementais até 100x (você leu certo) mais rápidas.

Tailwind v4 também possui um conjunto de ferramentas unificado. Lembra de ter que instalar autoprefixer e postcss em todos os seus projetos Tailwind? Você não precisará mais fazer isso!

Adotando uma abordagem interessante para configuração, o Tailwind está migrando dos arquivos de configuração JS para a configuração CSS. Isso significa que você configurará plug-ins, temas e outros comportamentos diretamente em seu CSS.

Tailwind também está recebendo suporte para os recursos mais recentes em CSS.

CSS tem um novo logotipo (e novos recursos)! ?

Melhores códigos ・ 23 de novembro

#css #webdev #programação #discutir

Agora, com as mudanças gerais em andamento, vamos ver o que especificamente o Tailwind está adicionando!

Novos recursos?

Se você quiser experimentar o Tailwind v4, consulte os documentos de introdução à v4 (beta).

Se você deseja atualizar seu projeto facilmente, basta executar npx @tailwindcss/upgrade@next e o Tailwind fará isso por você. Tenha cuidado! Pode haver alterações significativas.

Cores

A paleta de cores do Tailwind v4 é baseada em oklch em vez de rgb. O sistema de cores RGB é um pouco limitante em termos de consistência e vibração nas telas. Como o sistema de cores oklch agora é amplamente suportado, o Tailwind v4 vai tirar vantagem disso!

Consultas de contêiner

Tailwind v4 agora oferece suporte a consultas de contêiner por padrão. Se você não sabe o que são consultas de contêiner, deixe-me explicar.

Você conhece coisas no Tailwind como md:, sm:, etc. que permitem personalizar qual CSS é aplicado em diferentes tamanhos de tela?
Nesses casos, as classes referem-se ao tamanho de uma janela. Com consultas de contêiner, elas podem se referir ao tamanho de um contêiner.

No exemplo acima, a grade terá 3 colunas — não quando a janela atingir o tamanho pequeno, mas quando o contêiner atingir. Como você pode imaginar, isso é muito útil em layouts responsivos.


  
  
  Dimensionamento de campo


field-sizing ainda não é um recurso CSS com suporte universal, mas será incrível quando for! Em vez de precisar de JS para criar áreas de texto com redimensionamento automático, você pode usar apenas CSS.

E o Tailwind v4 suporta isso!

Experimente a demonstração no site do Tailwind.

Agora você pode simplesmente adicionar a classe field-sizing-content à sua área de texto para usá-la.

  
  
  Atualizações descendentes


Tailwind stable (você talvez não saiba disso) tem uma variante * que permite direcionar direto filhos de um elemento com uma classe. Por exemplo:







A nova ** variante no Tailwind v4 terá como alvo todos os descendentes:








  
  
  Sombras inseridas (e anéis)


Agora também será fácil criar sombras e anéis inseridos em elementos usando as classes inset-shadow e inset-ring.













  
  
  Tem muito mais!


Se você quiser ver todas as novidades, acesse https://tailwindcss.com/docs/v4-beta e confira!

Esta postagem é uma postagem #discuss! É por isso que fui breve; Quero saber o que você pensa!

Eu sei que muitos de vocês que odeiam o Tailwind provavelmente terão algum feedback para mim?

Definitivamente, existem alguns novos recursos controversos e quero obter algumas opiniões?

Resumo: Deixe um comentário!




Obrigado pela leitura!

Melhores códigos