TailwindCSS 4.0 ficou 10x mais rápido (e mais nativo!)

A nova versão do Tailwind 4.0-alpha finalmente chegou e dessa vez a gente tem uma proposta de código cada vez mais nativa.
Tem várias novidades nesse lançamento mas a principal delas com certeza é a velocidade, chegando a ser 10 vezes mais rápido. Isso porque o novo "motor", como eles mesmos comparam, é feito com Rust, conhecido por entregar velocidade, e com Lightning CSS, que agiliza o desenvolvimento de websites.
No vídeo eu exploro essa e outras mudanças que rolaram e conto porque tô animado com essa nova versão do TailwindCSS.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

Пікірлер: 89

  • @user-bv3cc1zg8c
    @user-bv3cc1zg8c2 ай бұрын

    Achei a atualização muito top. Poderá facilitar muito no entendimento e migração daqueles que começaram agora.

  • @gessegoncalves6493
    @gessegoncalves64932 ай бұрын

    muito bom saber disto , uso muito tailwind

  • @naturallifenow
    @naturallifenow2 ай бұрын

    I like so much UnoCSS. It faster than tailwind. It doesn't have any plugin in to compile the css . It has greatly features embedded like google fonts, purecss icons, attributify mode and has tailwindcss, bootstrap, bulma, foundations presets.

  • @TheJunioGG

    @TheJunioGG

    2 ай бұрын

    Here we go again

  • @maykrpc
    @maykrpc2 ай бұрын

    Já usei e não curto muito tailwind, no ambiente react acho mais sentido usar styled-components justamente pelo sistema de componentes que tem tudo a ver com react, sem falar que o código em tailwind fica uma selva desenfreada dentro das tags fazendo com que a leitura/manutenção fique muito ruim, mas fico feliz que a galera esteja melhorando essas ferramentas para os devs do front!

  • @TheJunioGG

    @TheJunioGG

    2 ай бұрын

    Eu já acho que dentro do react ou bibliotecas de componentes é a melhor utilização possível para o tailwind, faz todo sentido vc ter uma função que se resolve por completo. Em projetos que não envolvem componentes eu já não gosto.

  • @dragonhardhd371

    @dragonhardhd371

    2 ай бұрын

    Pse, n curto nem um pouco. Fica uma zona. Componentes são melhores

  • @arthur_snow

    @arthur_snow

    2 ай бұрын

    Nossa eu detesto styled components, acho que cada vez faz menos sentido usar

  • @eamax

    @eamax

    2 ай бұрын

    O grande problema do styled-components é que ele é muito pesado, gera um bundle enorme de JS para transformar o CSS dele em CSS mesmo, isso é algo que não vale o custo. No caso da OLX nós não usamos mais por esse custo ser alto de mais fazia projetos terem um loading grande de mais e penalizava o webvitals/performance, ao criar projetos novos já fazemos sem styled-components.

  • @paulovitorf.marques8714

    @paulovitorf.marques8714

    2 ай бұрын

    Joga um Tailwind Variants na hora de criar components que a vida resolve. Usa um plugin do prettier pra reorganizar as classes e vc tem um padrão de leitura do seu className em todo o projeto. A engine do tailwind faz um trabalho muito melhor que um dev comum na hora de resolver as classes e gerar um css file otimizado, vale a milha extra pra ter um DevEx decente.

  • @ThugLifeModafocah
    @ThugLifeModafocah2 ай бұрын

    vei... isso é brabo demais...

  • @WisleyASousa
    @WisleyASousa2 ай бұрын

    essa Rust só crescendo.

  • @xavierbarros
    @xavierbarros2 ай бұрын

    Sou da época em que só existia HTML e CSS. Com o advento do TailwindCSS, após seu amadurecimento, claro, é inegável que ele auxilia demais na criação de estilos web, diminuindo e otimizando e muito o tempo de criação de estilos. Creio que quem fala que o TailwindCSS 'suja' o código, o faz por não conhecer/não ter aprendido CSS à fundo. A dica de ouro é: se você é FRONTEND, é OBRIGAÇÃO sua saber CSS.

  • @CarlosSilva-hy8xt

    @CarlosSilva-hy8xt

    Ай бұрын

    na verdade quem fala que tailwind suja o codigo é o mesmo que cria uma pagina inteira em um unico arquivo, sem abstrair nada e so jogando no mesmo arquivo cada funcionalidade e componente

  • @danilochgs
    @danilochgs2 ай бұрын

    Será que logo vão implementar isto no Next?

  • @mikael.001
    @mikael.0012 ай бұрын

    Toppp

  • @Joanneswsquim
    @Joanneswsquim2 ай бұрын

    Faz um vídeo como usar o next 14 com prisma , yoga grphql e pothos grphql, tenho uma dúvida de como usar vários consultas, ou ali graphql mas para cada um em seu arquivo

  • @shift564
    @shift564Ай бұрын

    essa atualização do tw em relação a não ter q configurar tanta coisa, resolve os gargalos que o tw tem sobre escala ou desenvolvimento de aplicações como design system onde eu preciso ter muita coisa customizada?

  • @elvispalace
    @elvispalace2 ай бұрын

    eita olha eu na live kkk

  • @williancarddd
    @williancarddd2 ай бұрын

    onde ele faz essas lives e qual nome do canal ?

  • @saulgomes5638
    @saulgomes56382 ай бұрын

    Quando é que vai ter curso de Rust na plataforma? Abraço diegaooo

  • @jhonatanteixeirarios710

    @jhonatanteixeirarios710

    2 ай бұрын

    Provavelmente vai demorar. Não tem tanto mercado ainda. É mais provável ter Go.

  • @grilario

    @grilario

    2 ай бұрын

    Para aprender tanto Rust quanto Go elas duas tem ótimas documentação no seus próprios sites, tô estudando Rust a um tempinho e foi tudo lendo a documentação

  • @Roma-gw8jl

    @Roma-gw8jl

    2 ай бұрын

    @@grilario Real! O livro oficial (tanto em inglês, quanto em português) são MUITO bons! Dá pra aprender a linguagem tranquilamente por lá. Dá uma olhadinha lá, @saulgomes5638

  • @HaryelRamalhoo
    @HaryelRamalhoo2 ай бұрын

    Diegão, com qual app vc centraliza tua janela assim no macOS?

  • @entrepreneurdrive

    @entrepreneurdrive

    2 ай бұрын

    Eu acredito que seja o raycast

  • @williamalves471
    @williamalves4712 ай бұрын

    hoje em dia qual vale mais a pena, Styled Ccomponents ou Tailwind?

  • @darlleybrito4198

    @darlleybrito4198

    2 ай бұрын

    É tudo css, mas Style Components o futuro é mais incerto, não é que vai morrer mas o tailwind ninguem nem pensa nisso

  • @Gabriel_Azv
    @Gabriel_Azv2 ай бұрын

    Rapazeada, dúvida sincera de tailwind: como testa estilização com jest ou vitest? Exemplo: verificar a opacidade de um elemento é 1. Na versão 3.4, pelo menos, esse teste sempre irá falhar. A única solução foi testar se o elemento tem uma classe

  • @guilhermecosta6731

    @guilhermecosta6731

    2 ай бұрын

    Testar estilização?

  • @Cultosaurus_Erectus

    @Cultosaurus_Erectus

    2 ай бұрын

    Ainda bem que eu sou 100% backend. Frontend tem umas paradas estranhas.

  • @Gabriel_Azv

    @Gabriel_Azv

    2 ай бұрын

    ​@@guilhermecosta6731 Vamos supor que eu queira testar se determinada `div` tem um certo width quando eu clicar em um botão... Q solução vc pensaria?

  • @Pedroh1918

    @Pedroh1918

    2 ай бұрын

    Nesse caso seria interessante você dar uma olhada no Playwright ou Cypress. Por que dai voce consegue rodar testes no navegador e acessar/manipular a DOM além da automação para executar testes end two end

  • @ben53933

    @ben53933

    2 ай бұрын

    ​@@Gabriel_Azvesse tipo de teste é mais simples e resiliente ao tempo se feito via cypress, selenium e outras soluções mais tocadas em e2e

  • @franciscof5609
    @franciscof56092 ай бұрын

    A rapaziada aqui tem alguma dica de alguma ferramenta para minificar os classNames do tailwind? Tô fazendo server side rendering e as classNames enormes e repetitivas do material-tailwind que vão no markup da página tão ferindo a performance do meu servidor de SSR. Eu uso o Vite para buildar o projeto, qualquer dica já ajuda. Tamo junto

  • @ben53933

    @ben53933

    2 ай бұрын

    Você pode compor uma união das classes que estão se repetindo. Exemplo combinar btn btn-info btn-link-blue em .bluelink. Tem na documentação do tailwindcss

  • @franciscof5609

    @franciscof5609

    2 ай бұрын

    @@ben53933 Conhece alguma ferramenta/plugin para fazer isso automaticamente? Fazer isso não mão é inviável, são muitas classes

  • @CarlosSilva-hy8xt

    @CarlosSilva-hy8xt

    Ай бұрын

    o vite deve ser o problema mano kkk

  • @franciscof5609

    @franciscof5609

    Ай бұрын

    @@CarlosSilva-hy8xt Não é não, bro. O vite é ótimo, tô gostando demais. O problema era o tailwind, acabei melhorando bastante o problema usando o comando apply() do tailwind para agrupar classNames e fazendo dynamic import de alguns componentes pesados

  • @Ar-TK
    @Ar-TK2 ай бұрын

    Quanto menos coisa escrever, melhor 😅

  • @mateusdossantos2453
    @mateusdossantos24532 ай бұрын

    diegao faz as lives onde?

  • @awaxdem2013

    @awaxdem2013

    2 ай бұрын

    twitch

  • @Carlos72639
    @Carlos726392 ай бұрын

    Qual o nome do canal e plataforma da live?

  • @ivopereirajr

    @ivopereirajr

    2 ай бұрын

    m.twitch.tv/dieegosf

  • @philadelfiaproducao
    @philadelfiaproducao2 ай бұрын

    ja ta pronto pra prod ou ainda nao ?

  • @LucasAlfare

    @LucasAlfare

    25 күн бұрын

    Pesquisa no Google

  • @Pedro-hz4lf
    @Pedro-hz4lf2 ай бұрын

    Estou começando agora como programador e vi que no site do tailwind precisa pagar uns 200dol só para poder usar alguns templates?É isso mesmo?

  • @WilianMaique

    @WilianMaique

    2 ай бұрын

    para usar templates prontos sim, mas o tailwindcss é de graça, pra vc construir do 0

  • @lipsic2303
    @lipsic23032 ай бұрын

    Vamos trocar tudo de Javascript por Rust

  • @principe.borodin
    @principe.borodin2 ай бұрын

    eu sou da epoca do grunt e gulpe, e ate antes...

  • @danielsoares1608

    @danielsoares1608

    2 ай бұрын

    somos dois, não sinto saudades

  • @carlossergiolima4952
    @carlossergiolima49522 ай бұрын

    Qual navegador é esse?

  • @leobaldoneto

    @leobaldoneto

    2 ай бұрын

    Também quero saber

  • @elinatorres56

    @elinatorres56

    2 ай бұрын

    É o arc

  • @leobaldoneto

    @leobaldoneto

    2 ай бұрын

    @@elinatorres56 Bacana, vou pesquisar. Parece com o Vivaldi também

  • @filipeleonelbatista
    @filipeleonelbatista2 ай бұрын

    Pra que melhorar?! kkkk ja testei e ta superior mesmo.

  • @Cultosaurus_Erectus
    @Cultosaurus_Erectus2 ай бұрын

    Ficou tipo o Linux, 10x mais rápido que o Ruindows.

  • @Redyf

    @Redyf

    2 ай бұрын

    Faça de suas palavras as minhas

  • @LeandroUngari

    @LeandroUngari

    2 ай бұрын

    @@Redyf Eu discordo, o Linux não é 10 vezes mais rápido, é muito mais ainda

  • @silasbispo01

    @silasbispo01

    2 ай бұрын

    é ruim e vc ainda perde tempo falando kkkk chora

  • @Cultosaurus_Erectus

    @Cultosaurus_Erectus

    2 ай бұрын

    @@silasbispo01 Top 10 argumentos. Beijos.

  • @VictorSilvaDev

    @VictorSilvaDev

    2 ай бұрын

    Não existe sistema melhor que outro não bro, deixa disso, cada um tem um propósito.

  • @DanVC
    @DanVC2 ай бұрын

    10x mais rápido.. mas apenas no ambiente de dev.. não prod.

  • @gabrielaugusto1161

    @gabrielaugusto1161

    2 ай бұрын

    compilações mais rapidas amigo

  • @DanVC

    @DanVC

    2 ай бұрын

    @@gabrielaugusto1161 exato.. mas no final das contas.. não muda muita coisa..

  • @gabrielaugusto1161

    @gabrielaugusto1161

    2 ай бұрын

    @@DanVC em produção muda sim, menos tempo de compilação = menos gastos

  • @DanVC

    @DanVC

    2 ай бұрын

    @@gabrielaugusto1161 não sei se você tem conhecimento de custos (principalmente para ambient de deployment) mas, acho eu que esse custo é irrisório (tendo como base ambientes de deployment de várias aplicações). Enfim, achismo meu

  • @gabrielaugusto1161

    @gabrielaugusto1161

    2 ай бұрын

    @@DanVC Achismo seu