Progresso do Tailwind CSS v4.0 é aberto como código aberto

• Um novo mecanismo de alto desempenho, o Oxide, está sendo desenvolvido para o Tailwind CSS v4.0.
• Ele foi projetado para simplificar a experiência do desenvolvedor e aproveitar as evoluções mais recentes da plataforma web.
• Originalmente estava previsto para ser lançado como uma versão v3.x, mas foi decidido lançá-lo como v4.0 por se tratar de uma nova geração do framework.
• Ainda está em estágio inicial e ainda há muito trabalho pela frente, mas já é possível começar a experimentar com a primeira versão alpha pública.

Novo mecanismo, construído para velocidade

• O novo mecanismo foi reescrito do zero e oferece mais velocidade com menos código.
• Ele proporciona velocidades de build até 10 vezes maiores; o site do Tailwind CSS pode ser compilado em 105ms, e o kit de UI Catalyst em apenas 55ms.
• O novo mecanismo tem um tamanho de instalação mais de 35% menor, mesmo incluindo pacotes nativos pesados como Rust e Lightning CSS.
• Ele usa Rust para lidar com as partes mais custosas do framework e mantém o núcleo em TypeScript para oferecer extensibilidade.
• O novo mecanismo depende apenas do Lightning CSS.
• A equipe escreveu seu próprio parser de CSS e projetou estruturas de dados que oferecem parsing 2 vezes mais rápido que o PostCSS.

Toolchain integrada

• O Tailwind CSS v4 não é mais apenas um plugin, e sim uma ferramenta tudo-em-um para processar CSS.
• Processamento de @import, vendor prefixing, suporte a aninhamento e outros recursos já vêm embutidos, sem necessidade de configuração separada.
• Recursos modernos de CSS, como cores oklch() e intervalos de media query, são convertidos para uma sintaxe com melhor suporte nos navegadores.
• O plugin do PostCSS continuará sendo oferecido, mas a equipe também está explorando plugins para bundlers e disponibiliza um plugin oficial para Vite junto com a primeira versão alpha.

Projetado para a web moderna

• O Tailwind CSS v4 busca construir um framework que continue parecendo de ponta nos próximos anos.
• Ele usa regras @layer reais para resolver problemas de especificidade que causaram dificuldades no passado.
• Usa @property para definir claramente propriedades customizadas internas e possibilitar efeitos como gradientes de fundo.
• Usa color-mix para facilitar alterações de opacidade em variáveis de cor ou no currentColor.
• Inclui suporte direto a container queries no núcleo, além de suporte a intervalos de container query com as novas variantes @min-* e @max-*.

Variantes combináveis

• A nova arquitetura permite compor juntas variantes que atuam sobre seletores diferentes.
• Em versões anteriores, variantes como group-has-* eram definidas explicitamente no framework, mas agora group-* pode ser composto com a variante has-* existente.

Detecção de conteúdo sem configuração

• Na versão alpha inicial, não é possível configurar caminhos de content, e na maioria dos projetos não haverá necessidade de definir isso novamente.
• Ao usar o plugin do PostCSS ou a CLI, o Tailwind percorre todo o projeto para localizar arquivos de template.
• Ao usar o plugin do Vite, ele se apoia no grafo de módulos para saber com precisão quais arquivos estão realmente em uso.

Configuração com CSS em primeiro lugar

• Um dos principais objetivos do Tailwind CSS v4.0 é fazer o framework parecer nativo de CSS, e não uma biblioteca JavaScript.
• Após a instalação, ele é adicionado ao projeto usando uma instrução comum de @import em CSS.
• Em vez de definir toda a customização em um arquivo de configuração JavaScript, ele usa variáveis CSS.

O que mudou

• Alterações importantes não foram tratadas de forma leviana, mas na v4 algumas coisas passam a funcionar de maneira diferente.
• Utilitários não documentados foram removidos.
• O plugin do PostCSS e a CLI agora são fornecidos como pacotes separados.
• A cor de borda padrão foi removida.
• Por padrão, o utilitário ring agora é um anel de 1px que usa currentColor.

Roadmap até a v4.0

• O novo mecanismo foi reescrito do zero e o foco está totalmente na experiência do desenvolvedor com uma nova abordagem de configuração.
• A compatibilidade retroativa é considerada muito importante e é uma das principais frentes de trabalho para a versão estável v4.0.
• Isso inclui suporte a arquivo de configuração JavaScript, configuração explícita de caminhos de conteúdo, outros modos de dark mode, suporte a plugins e utilitários personalizados, configuração de prefixo de classes, suporte a safelists e blocklists, suporte à configuração important, suporte à função theme() e suporte a CLI standalone, entre outros.

Experimentando a versão alpha

• Algumas versões alpha já foram marcadas, e já é possível começar a testar no seu projeto hoje mesmo.
• Se você usa a extensão Tailwind CSS IntelliSense, será necessário mudar para a versão de pré-lançamento na página da extensão do VS Code.
• Se encontrar algum problema, a equipe pede que você avise no GitHub.

Usando com Vite

• Instale o alpha do Tailwind CSS v4 e o novo plugin para Vite.
• Adicione o plugin ao arquivo vite.config.ts.
• Importe o Tailwind no arquivo CSS principal.

Usando com PostCSS

• Instale o alpha do Tailwind CSS v4 e o pacote separado do plugin do PostCSS.
• Adicione o plugin ao arquivo postcss.config.js.
• Importe o Tailwind no arquivo CSS principal.

Usando com CLI

• Instale o alpha do Tailwind CSS v4 e o pacote separado da CLI.
• Importe o Tailwind no arquivo CSS principal.
• Compile o CSS usando a ferramenta de CLI.

Opinião do GN⁺

• A abertura em código aberto do Tailwind CSS v4.0 dá à comunidade de desenvolvedores a chance de experimentar antecipadamente novos recursos e melhorias. Isso significa uma oportunidade para enviar feedback sobre o framework e contribuir para uma versão final mais estável.
• A melhora de desempenho do novo mecanismo parece reduzir significativamente o tempo de build, o que deve ser especialmente útil em projetos grandes ou em ambientes onde ciclos rápidos de desenvolvimento são importantes.
• A combinação de Rust e TypeScript reflete uma abordagem moderna que busca ao mesmo tempo desempenho e extensibilidade. As partes escritas em Rust maximizam a performance, enquanto o TypeScript facilita a extensão e a manutenção pelos desenvolvedores.
• A nova forma de configuração usando variáveis CSS é mais amigável ao CSS do que a configuração tradicional baseada em JavaScript e pode facilitar a integração com design systems.
• Essas mudanças podem exigir algum trabalho de migração para usuários atuais, mas a expectativa é que, no longo prazo, resultem em uma base de código mais enxuta e mais fácil de manter.

[GN⁺]

Comentários do Hacker News

• Tailwind CSS é a segunda melhor coisa no frontend, e só o Vue 3 supera isso.

  • Não há o esforço de dar nomes para classes CSS, nem problemas com CSS duplicado ou conflitos entre classes.
  • Todo o código fica em um único arquivo, então dá para visualizar o componente apenas olhando o código.
  • Não voltaria para SCSS, e acho que a combinação Vue 3, TailwindCSS e Vite é a melhor.

• Como alguém que critica fortemente o Tailwind, todos os anúncios sob a configuração CSS-first são muito bem-vindos.

  • Dá para aproveitar os design tokens, resets etc. do Tailwind e customizar por meio de CSS real.
  • Apresenta uma nova forma de usar o Tailwind de maneira “leve”, sem abrir mão da arquitetura moderna do CSS, da cascade e até mesmo do shadow DOM dos web components.

• CTRL+u mostra um bom exemplo da sintaxe.

  • Por exemplo, é preciso uma linha de código intuitiva para criar uma caixa com cantos arredondados e seções superior e inferior.

• Ainda não trabalharam no CLI standalone, mas com certeza ele ficará pronto antes do lançamento da v4.0.

  • Considerando o restante do anúncio de lançamento, presumo que isso será desenvolvido em Rust.
  • Prefiro que não embutam Node, especialmente se isso depender da ferramenta pkg da Vercel, que agora foi abandonada.

• Há muitas melhorias promissoras.

  • O que mais me anima é a possibilidade de controlar o tema via CSS em vez de estender isso por JS.

• Espero que o Tailwind passe a oferecer suporte a attributify, como o unocss.

  • Fica muito mais legível para layouts complexos.

• Não sou desenvolvedor frontend, mas mantenho alguns sites, e todos usam Tailwind.

  • Os mantenedores do Tailwind têm uma intuição muito boa para definir prioridades e um excelente senso de design.
  • Tailwind é daquelas coisas que você não entende até usar, mas a cada versão entrega um produto mais refinado.
  • Nesta versão, não houve grandes mudanças em termos de compatibilidade, mas quando a versão 4 for oficializada pode haver mais alterações.
  • A perspectiva do novo engine é muito legal, e melhorias na velocidade de build são sempre bem-vindas.

• Fico me perguntando se existe algum bom tutorial/guia sobre Tailwind.

• Fico me perguntando se alguém usa tailwindcss com htmx ou alguma outra abordagem hateoas.

  • O hypertext não deveria ter relação com styling, mas algo como o Tailwind pode entrar em conflito com isso.
  • CSS e hateoas combinam perfeitamente porque markup e styling ficam separados, mas no caso de algo como tailwindcss, fico curioso sobre como fazem isso.

• Queria usar isso em um projeto de demonstração, mas import from "node:@tailwindcss/postcss@latest" gera um erro relacionado ao campo exports do package.json.

  • Mesmo assim, o post do blog menciona que não é necessário usar postcss-import, mas ainda assim o inclui como dependência.