Se você já trabalhou com Tailwind CSS, provavelmente usou o daisyUI. Como uma das bibliotecas de componentes mais populares, é valorizada por seus padrões sensatos, amplo conjunto de componentes e flexibilidade que se integra naturalmente ao Tailwind.

Agora, com o lançamento do Tailwind CSS 4, o ecossistema está evoluindo e o daisyUI está acompanhando o ritmo. A Versão 5 é mais do que uma atualização: é uma reescrita completa para ser menor, mais rápida e mais personalizável.

Neste guia, analisaremos o que há de novo no daisyUI 5. Você verá como migrar um componente da v4 para a v5, aplicar o novo mecanismo de temas e experimentar novos componentes e modificadores.

Atualização do núcleo para desempenho e construção moderna

Antes de mergulhar nos novos componentes e temas, vale a pena notar que a maioria das mudanças reais no daisyUI 5 ocorre internamente. A biblioteca foi completamente reengenheirada para rodar mais rápido, ser mais leve e funcionar bem com os padrões modernos da web.

Biblioteca mais rápida e leve

O desempenho recebeu uma atualização significativa no daisyUI 5. Aqui estão os números importantes:

• Zero dependências: Isso é uma grande vitória. O daisyUI 5 eliminou completamente todas as dependências de terceiros, resultando em tempos de instalação npm mais rápidos e uma superfície de ataque de segurança significativamente menor.
• Tamanho do pacote 61% menor: O pacote npm foi reduzido de 4,7 MB para apenas 1,8 MB, contribuindo diretamente para uma configuração de projeto mais rápida e menor uso de espaço em disco.
• Arquivo CDN 75% menor: O arquivo CSS inclusivo, que antes era full.css, agora é daisyui.css e foi reduzido de 137 kB para apenas 34 kB. Isso torna o uso do arquivo CDN diretamente em produção uma opção viável e eficiente, especialmente para projetos sem etapa de construção.

Adoção do CSS moderno

Esses ganhos de desempenho foram possíveis graças à adoção de recursos modernos do CSS e ao poder do Tailwind CSS 4.

• Nesting CSS nativo: Com o suporte ao Nesting CSS nos principais navegadores, o daisyUI 5 o utiliza extensivamente, evitando seletores duplicados comuns em preprocessadores antigos, resultando em uma folha de estilo menor e mais eficiente.
• color-mix() para opacidade: Graças ao Tailwind 4, o daisyUI não depende mais de truques para lidar com a opacidade das cores, utilizando agora a função color-mix() nativa, que é mais eficiente e permite variáveis de cor mais claras e flexíveis.

Como atualizar um componente: daisyUI v4 para v5

A melhor maneira de ver o que há de novo no daisyUI 5 é atualizar um componente real. Nesta seção, começaremos com um elemento de UI simples construído no daisyUI 4 e passaremos pelo processo de trazê-lo para a v5, analisando mudanças na configuração, nomes de classes e variáveis de tema.

Com essas adições, nosso painel de configurações simples agora é mais funcional e visualmente diversificado, mostrando as novas ferramentas disponíveis no daisyUI 5.

Conclusão

Exploramos as mudanças mais impactantes no daisyUI 5, desde seu núcleo reengenheirado até seu sistema de design aprimorado. Ao migrar um componente existente, vimos como essa atualização é mais do que apenas uma coleção de novos recursos; é uma modernização fundamental de toda a biblioteca.

Para a enorme comunidade de usuários do daisyUI, esta versão é uma atualização essencial que traz melhorias tangíveis de desempenho e fluxo de trabalho. Para qualquer desenvolvedor no ecossistema Tailwind, o daisyUI 5 solidifica sua posição como a biblioteca de componentes mais poderosa, flexível e bem projetada disponível hoje.