Lançamento do Tailwind CSS v4.0

• Lançamento do Tailwind CSS v4.0

  • Uma nova versão com desempenho e flexibilidade otimizados, aproveitando ao máximo os avanços mais recentes da plataforma web
  • Com um novo mecanismo de alto desempenho, a velocidade de build completa ficou até 5 vezes mais rápida, e a de builds incrementais mais de 100 vezes mais rápida
  • Projetado para a web moderna com uso dos recursos mais recentes de CSS

• Novo mecanismo de alto desempenho

  • O Tailwind CSS v4.0 é uma reescrita completa do framework, com arquitetura otimizada para maximizar a velocidade
  • Os builds incrementais ficaram mais de 100 vezes mais rápidos, concluindo em microssegundos

• Projetado para a web moderna

  • Usa recursos modernos de CSS como camadas de cascata nativas, propriedades personalizadas registradas e color-mix()
  • Usa propriedades lógicas para simplificar o suporte a RTL e reduzir o tamanho do CSS gerado

• Instalação simplificada

  • O processo de instalação foi simplificado, com menos dependências, exigindo apenas uma linha de código no arquivo CSS
  • Suporte nativo à regra @import, sem necessidade de plugins externos

• Plugin para Vite

  • Usuários de Vite podem integrar o Tailwind com @tailwindcss/vite
  • O uso do plugin do Vite melhora ainda mais o desempenho

• Detecção automática de conteúdo

  • Detecta automaticamente arquivos de template, sem necessidade de configuração
  • Ignora automaticamente itens no arquivo .gitignore para evitar varreduras desnecessárias

• Suporte embutido a import

  • É possível importar outros arquivos CSS inline usando @import
  • Um sistema de import otimizado para o Tailwind CSS melhora ainda mais o desempenho

• Configuração com prioridade em CSS

  • O projeto pode ser configurado em CSS em vez de JavaScript
  • É possível personalizar diretamente no arquivo CSS, sem tailwind.config.js

• Variáveis de tema em CSS

  • Fornece design tokens como variáveis CSS, facilitando sua referência em tempo de execução

• Valores e variantes utilitárias dinâmicas

  • Foi simplificado para que várias utilidades e variantes aceitem valores arbitrários
  • Facilita definir tamanhos de grid ou atributos de dados personalizados

• Paleta de cores P3 modernizada

  • A paleta de cores padrão foi atualizada de rgb para oklch, oferecendo cores mais vibrantes

• Container queries

  • Fornece nativamente uma API para estilizar elementos de acordo com o tamanho do container

• Novas utilidades de transformação 3D

  • Adiciona uma API para transformar elementos em espaço 3D

• API de gradientes expandida

  • Adiciona utilidades para criar gradientes lineares, cônicos e radiais

• Suporte a @starting-style

  • Adiciona a capacidade de fazer transição de propriedades quando um elemento é exibido pela primeira vez, sem JavaScript

• Variante not-*

  • Adiciona suporte à pseudoclasse CSS :not()

• Novas utilidades e variantes adicionadas

  • Adiciona várias novas utilidades e variantes como inset-shadow-*, field-sizing, color-scheme e outras

O Tailwind CSS v4.0 é a versão mais recente com desempenho e flexibilidade maximizados, oferecendo diversos novos recursos e melhorias.

[GN⁺]

Comentários do Hacker News

• A evolução do Tailwind v4 é avaliada de forma positiva, e o suporte a variáveis CSS e configuração apenas com CSS é uma grande vantagem. O Tailwind agora parece cumprir bem seu papel como utilitário

• O CSS se tornou mais amigável ao usuário do que no passado, e usar propriedades de estilo diretamente no HTML pode ser mais simples. Ainda assim, algumas pessoas continuam preferindo evitar o atributo style

• É bom poder ler os estilos em um só lugar usando Tailwind. Os nomes de classe são longos, mas é útil porque facilita modificar os estilos

• Quando teve o primeiro contato com Tailwind, a necessidade de reaprender CSS pareceu um fardo. Mas acabou entendendo que ele é útil em trabalho em equipe e em termos de escalabilidade. Ainda assim, continua preferindo folhas de estilo tradicionais

• Em projetos com Tailwind, ele pareceu intuitivo e bem documentado. Não precisar pensar em nomes para estilos ajuda a economizar tempo

• Com a atualização mais recente do Tailwind, o tempo de build diminuiu e deixou de ser necessário configurar JS. Agora o CSS consegue dar conta da maior parte do trabalho

• Tentou usar Tailwind, mas o resultado não ficou tão bom quanto com Bootstrap. Está pensando em como obter resultados aceitáveis sem precisar virar designer

• O design limpo, mas genérico, do Tailwind está amplamente difundido. Isso mostra as vantagens e limitações dos estilos inline do Tailwind

• A atualização para o Tailwind v4 afetou aplicativos existentes. Por causa de problemas de compatibilidade, a situação exige continuar usando a v3 ou modificar scripts de build