tailwind CSS v4.0: o divisor de águas definitivo do desenvolvimento web moderno [artigo traduzido]
(siosio3103.medium.com)- A principal característica do v4.0 é a melhoria de desempenho: builds completos até 5 vezes mais rápidos, e builds incrementais mais de 100 vezes mais rápidos
- Mudança de paradigma com configuração priorizando CSS: em vez de
tailwind.config.js, a configuração é feita diretamente no CSS - Controle de prioridade de estilos usando
@layer - Possibilidade de definir propriedades personalizadas com a regra
@property - Com a função
Color-Mix(), é possível ajustar a transparência de qualquer valor de cor, incluindo variáveis CSS ecurrentColor - Em vez de
margin-leftemargin-right, agora é possível resolver tudo de uma vez com propriedades lógicas comomargin-inline, tornando o suporte a RTL muito mais simples - Processo de instalação simplificado:
npm i tailwindcss @tailwindcss/postcssexport default { plugins: ["@tailwindcss/postcss"],};@import "tailwindcss";e pronto - Detecção automática de conteúdo: agora ignora automaticamente
.gitignoree binários como imagens/vídeos, além de escanear os arquivos relevantes automaticamente. Há suporte a@sourcepara exceções - Suporte prioritário ao plugin do Vite
- Geração dinâmica de utilities, permitindo usar imediatamente valores que não existiam na configuração anterior
- Sistema de cores evoluído: toda a paleta de cores padrão foi atualizada de RGB para OKLCH
- Container Queries integradas ao framework
- Suporte a transformações 3D e gradientes aprimorados
- Inclusão de novos Variants e Utilities: variants
not-*,starting,inert,nth-*,descendante utilitiesfield-sizing,color-scheme,inset-shadow-* - Migração mais fácil do que o esperado: a maioria das mudanças pode ser atualizada automaticamente
- A visão maior que o tailwind desenha: mais do que uma simples atualização de framework, um desafio ousado ao futuro do CSS
- Vale a pena fazer upgrade? Para projetos novos, escolha o v4.0. Em projetos existentes, é fácil atualizar se o serviço tiver como alvo navegadores modernos
- Conclusão: tailwind CSS v4.0 não é uma simples evolução, mas uma revolução
12 comentários
Depois de aplicar e usar o Tailwind por um ano
Vou usar no próximo projeto? SIM
É um divisor de águas no desenvolvimento web? NÃO
Achei exagerado chamar isso de divisor de águas, então resolvi comentar.
Não acho que dê para afirmar categoricamente que esse seja um estilo progressista que devemos buscar daqui para frente.
O Tailwind tem vantagens para copiar e colar templates, geração simplificada com IA e ajustes simples de estilo, mas
até tags fáceis de ler acabam ficando ofuscadas, e também é difícil reproduzir com precisão um design feito por um designer. Também acho que, se as variáveis CSS forem bem definidas, no nível de dificuldade isso não difere tanto de estilos inline.
Por favor, deem suporte ao rn..
Não vá longe demais… pode acabar engolindo tudo…
Por enquanto vou usar a 3.x e, quando a adoção realmente decolar, acho que faço a migração.
https://tailwindcss.com/docs/upgrade-guide
shadow-sm->shadow-xsshadow->shadow-smNa próxima versão, já nem dá para prever que compatibilidade eles vão quebrar de novo.
Continua.saindo.sem.parar.tecnologia.web.
As.tecnologias.que.já.existem.já.são.suficientes.
Só.com.C.Assembly.HTML.e.JavaScript.já.é.possível.fazer.tudo.
Você ainda é do tipo que não usa as 'funções' do Excel?
Dá para fazer tudo com uma calculadora também.
Mas então por que usar pontos em vez de espaços?
É parte do jeito de falar “old school” humano.
Parece ser uma paródia do hábito de pessoas mais velhas digitarem pontos com frequência no lugar dos espaços...
Senhor Kim. Há algo que eu ouso aconselhar. Não é outra coisa: por favor, não use tanto as funções do Excel... Se há conveniência, o risco aumenta. Para abater um boi, existe uma lâmina adequada; para pegar uma galinha, será que precisa de faca? O mais simples pode ser a resposta.
kkkkkkkkkk muito engraçado
😅
Dizem que é simplificação e upgrade, mas no fim é só mais uma coisa para aprender. É isso.