3 Tips for Scaling React Apps with TailwindCSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ก.ย. 2024

ความคิดเห็น • 110

  • @DanielRodrigues-xu2rq
    @DanielRodrigues-xu2rq ปีที่แล้ว +10

    qual o tema do vscode?

    • @rocketseat
      @rocketseat  ปีที่แล้ว +2

      Sabia que essa é a pergunta que o Diegão mais recebe? 😁 por isso mesmo que a gente criou um guia com indicação de temas e configurações dos ambientes dos nossos educadores, e o melhor: totalmente gratuito! Tá disponível aqui: rocketforms.typeform.com/GuiaTerminal 💜

    • @lucaspires8187
      @lucaspires8187 ปีที่แล้ว +6

      Min Theme

  • @diogosoares6546
    @diogosoares6546 ปีที่แล้ว +46

    Ja conhecia o CVA, mas esse TailwindVariants é mais abrangente mesmo, e faz ai a continuação mostrando a Slot API, por favor.

  • @EvertJunior
    @EvertJunior ปีที่แล้ว +18

    Tenho sido um pouco resistente em adotar alguma dessas libs de variants, sinto que isso não é muito "idiomático". São boas soluções, mas pra problemas que voce mesmo está criando. Acho q se seu componente está tão complexo que data atributes não esta sendo suficiente, talvez ele esteja tentado ser coisas demais e podendo receber opiniões demais, nesse momento voce ja perdeu controle do visual dele pela aplicação e qualquer alteração pode quebrar esse componente de várias formas e combinações.
    Essas libs são feitas pra criadores de bibliotecas estilo MUI/Chakra que por design a API deve receber o máximo de opiniões possível do consumer pra ser versátil o suficiente para vários projetos (notem q elas tem poucas estrelas e são mantidas por pouquíssimas pessoas). Nos projetos que trabalho eu exponho no máximo uma prop "styled" com alguns presets de aparência ou deixo completamente headless pra que seja possível aproveitar só a lógica pra algum uso específico.

    • @Joanneswsquim
      @Joanneswsquim 9 หลายเดือนก่อน +2

      interessante, tem algum video seu mostrando boas praticas em projetos que se aproxime do real que tende a escalar ? se tiver compartilhe com a gente

  • @marceloviannadev
    @marceloviannadev ปีที่แล้ว +26

    Monstro! Mas o que falta é, projeto do zero com next como numa empresa e dia a dia real e nao exemplos mortos sem utilidade. Em um projeto de media escala seguindo toda as boas práticas frontend + design patterns + tema e principalmente em projetos que vão escalar, a cabeça do cara explode e ninguem mostra como é na real! Fica o apelo e quero ver se topam um projeto real, seguindo auto lauout e padroes figma e depois codar tudo com tudo que ha de melhor no mercado e pra melhorar, com redux pra gerenciar o app. Projeto de um site institucional por exemplo com dashboard de user e alterações de estados complexas... enfim... seria animal mostrar realmente como o dia a dia é, a cabeça explode... 😅

    • @RafaelSouza-l6i
      @RafaelSouza-l6i 7 หลายเดือนก่อน +2

      Só pagar o curso da rocketseat pae

    • @marceloviannadev
      @marceloviannadev 7 หลายเดือนก่อน

      Tenho acesso pela empresa, tudo que está lá dentro não chega perto do que descrevi acima, a crítica fica em vir ao YT mostrar de forma superficial as coisas blz, abraço 🤘 ...@@RafaelSouza-l6i

    • @matheusmczvieira
      @matheusmczvieira 3 หลายเดือนก่อน

      No ignite tem exemplos bem mais abrangentes e complexos.

    • @LuisGustavo-um4hs
      @LuisGustavo-um4hs หลายเดือนก่อน +1

      uai quer que coda pra você também KKKKKKK

    • @marceloviannadev
      @marceloviannadev 28 วันที่ผ่านมา

      @@LuisGustavo-um4hs Nope! Senior aqui 10+ belê? Fui bem simples e direto: Mas o que falta é, projeto do zero com next como numa empresa e dia a dia real e nao exemplos mortos sem utilidade.

  • @luancoelho1983
    @luancoelho1983 ปีที่แล้ว +10

    Diego no curso de Nextjs do Ignite é abordado sobre todas essas boas práticas ensinadas aqui no canal da Rockeseat do YT?

    • @leandrociric5007
      @leandrociric5007 ปีที่แล้ว

      Lá no ignite, tem conteudos mais separados, e o Diego costuma ir um pouco mais a fundo, porém esses conteúdos do que eles estão usando no dia a dia tem mais no youtube, para ir para o Ignite imagino que tenha que estar mais consolidado com a rocketseat.
      Mas normalmente lá a gente coloca a mão na massa em algum projeto, o que é bem mais prático!! E está para sair um conteúdo só sobre tailwind nos próximos dias! Eu acho que vale super a pena, além deles estarem sempre atualizando!

    • @markus_dev_cwb
      @markus_dev_cwb ปีที่แล้ว

      @@leandrociric5007 Ótimo porque os Projetos de Next.Js são bem legais, o que estraga é estilizar com Stitches. Graças essa porcaria de Stitches vai ser descontinuado em breve.

    • @dieegosf
      @dieegosf ปีที่แล้ว +3

      Fala Luan, aqui no TH-cam acabo trazendo algumas techs beta que não estão no mercado ainda, então nem tudo está no Ignite. No Ignite focamos no que está sólido e te ajudará diretamente no mercado.

    • @luancoelho1983
      @luancoelho1983 ปีที่แล้ว +3

      @@leandrociric5007 O meu medo de investir um valor significante no curso é de me deparar com um conhecimento que basicamente me ensina o que está escrito na documentação (neste caso eu estudaria por lá) ao invés de falar sobre o que realmente empresas estão usando em seus grandes projetos. Ou seja não ter a sensação que estou só fazendo mais um curso que ensina algo técnico e sim espero aprender boas práticas, padrões de projeto e o todo o fluxo de desenvolvimento por parte da tecnologia do next.

    • @DigitawGamer
      @DigitawGamer ปีที่แล้ว

      @@luancoelho1983 Opa mano, eu sei que tô respondendo depois de 3 semanas, mas pra mim o diferencial do curso da Rocketseat é justamente que eles ensinam techs bastante utilizadas no mercado e com boas práticas (sem as gambiarras que alguns tutoriais fazem só pra funcionar em vídeo kk), você provavelmente vai usá-las em projetos no seu trabalho. Aconselho fortemente se estiver entre o nível júnior/pleno pois o conteúdo vai te ajudar a se consolidar como pleno, pelo menos foi assim comigo.

  • @fabiomoraes013
    @fabiomoraes013 ปีที่แล้ว +4

    Eu trabalho com Styled Components nos meus projetos há anos e já fiz alguns projetos com Tailwind. O único problema é que parece que o Tailwind é uma abordagem de estilização orientada a 'gambiarras' kkkk.

    • @diogosoares6546
      @diogosoares6546 ปีที่แล้ว +1

      Onde é que estao essas gambiarras? Pq o CSS classico na sua grande maioria sao classes que por traz tem milhares de regras css que vao aos poucos montando tudo, e o tailwind são utilities class, e o CSS in JS do styled e outros so faz sentido usar se voce usar as props dentro do css pra fazer sentido usar, pq é meio que é pra isso que foi criado, pq a maioria dessas legadas o CSS é compilado no runtime, gerando problema de performance, o tailwind complida zero runtime igual a css tradicional, enfim, sou suspeito de falar, pq sou muito mais produtivo com tailwind, sem falar da facilidade de aplicar responsividade com ele, eu nunca gostei de nenhuma ferramenta CSS in Js mesmo antes do tailwind preferia css tradicioal e css modules, no maximo usava um stitches.

    • @derciojds
      @derciojds ปีที่แล้ว +1

      @@diogosoares6546 A nova versão do sass usa dart para compilar o css, a velocidade comparando com o css tradicional é quase que insignificante mesmo em projectos grandes. Então essa coisa de 'zero runtime' é só uma desculpa.

    • @marceloviannadev
      @marceloviannadev ปีที่แล้ว

      Tailwind é ideal para seguir um padrão estrutural qe conversa perfeitamente com design patterns e auto layout. Usando de qualquer jeito e fora de uma estrutura padronizada, realmente fica horroroso e cheira a gambiarra...

    • @icaroteles2773
      @icaroteles2773 3 หลายเดือนก่อน

      ​@@derciojdsmas Sass é um pré-processador, toda a conversão para CSS é feito em tempo de compilação, então ele é 0 runtime. Esse argumento de não ser 0 runtime é utilizado para bibliotecas CSS-in-JS, que normalmente não são, mas hoje em dia já existem algumas que são, como é o caso da Vanilla Extract

  • @yanderalves1619
    @yanderalves1619 6 หลายเดือนก่อน

    Última aplicação que fiz, ficou horrível porque eu não tinha mt noção de como fazer componentes cujo estilo dependiam de outras coisas, com o Tailwind Variants vai ficar coisa linda

  • @isonhar
    @isonhar ปีที่แล้ว +5

    Até no "trono" seus vídeos são bem vindos

    • @zevdvlpr
      @zevdvlpr ปีที่แล้ว +1

      True

  • @ribeiro.evandro
    @ribeiro.evandro ปีที่แล้ว +1

    Essas dicas são sensacionais... Mas infelizmente como trabalho em um projeto com PHP/Laravel usando as Blades do Laravel, não consigo aproveitar o melhor desses mundos... Mas o conteúdo é irado

  • @devmts
    @devmts หลายเดือนก่อน

    Ótimo video, basicamente explicando o que o shadcn faz nos componentes dele

  • @rcodev
    @rcodev ปีที่แล้ว +1

    Pessoalmente, eu não consigo gostar dessas aplicações feitas desse jeito com o estilo misturado com o código. curto e acho muito mais bonito fazer tudo separado mesmo.

  • @markqsantos7613
    @markqsantos7613 ปีที่แล้ว +1

    É melhor fazer direto no arquivo Tailwind, temos que parar de usar tantos frameworks

    • @marceloviannadev
      @marceloviannadev ปีที่แล้ว

      Foi meu primeiro pensamento. Desnecessário na maioria dos casos. O variants é interessante e util em alguns casos bem específicos. Vendo os vídeos desse maluco, é viciado em library. Over engenniring mandou lembranças. A pressa não leva a perfeição e o projeto vai ficando mais complexo do que deveria ao aumentar a escala do mesmo.

  • @AndreOlive
    @AndreOlive ปีที่แล้ว +6

    Estou adorando usar tailwind, obrigado pelas dicas.

  • @luisguilhermeselenko3579
    @luisguilhermeselenko3579 ปีที่แล้ว +3

    Só conhecia o CLS. Essas dicas são ótimas, embora eu considere um pouco chatinhas de entender e implementar. Faz a sequência dos slots aí Diegão!

    • @vitor666nunber
      @vitor666nunber ปีที่แล้ว

      queria essa sequência dos slots tbm! Aguardando

  • @ricardobastos242
    @ricardobastos242 3 วันที่ผ่านมา

    Q massaroca…depois de 3 meses deixam de usar a metade das coisas

  • @evandr000
    @evandr000 ปีที่แล้ว +2

    Interessante essas dicas, mas ao invés de usar o TailwindVariants não seria mais simples e organizado construir essas props na tipagem do componente e montar um objeto de tema pra estilizar as props? Aí seria possível acessar todas as props do componente base e ainda manipular especificamente cada uma das que tiver necessidade de valores predefinidos... Sai um pouco da proposta de deixar tudo dentro da declaração do componente, mas dependendo da complexidade dele, acho mais fácil de organizar Oo

    • @JoaoPaulo-gu7cu
      @JoaoPaulo-gu7cu ปีที่แล้ว +2

      Cada dia Eles usam alguma coisa diferente, você termina um curso e já está totalmente " desatualizado"

  • @neliodiassantos
    @neliodiassantos ปีที่แล้ว +2

    Que show, estava com querendo saber sobre isso hoje hahaha Valeu pelo video!

  • @principe.borodin
    @principe.borodin ปีที่แล้ว +1

    Dica fantastica, eu tava prourando algo assim para criar um design system.

  • @Brenosalv
    @Brenosalv ปีที่แล้ว +1

    Por que usar o pnpm ao invés dos mais tradicionais npm e yarn?

    • @dieegosf
      @dieegosf ปีที่แล้ว +4

      PNPM lida melhor com cache e é mais eficiente em economia de espaço em disco.

  • @LucasSouza-ev2wb
    @LucasSouza-ev2wb 3 หลายเดือนก่อน

    Cara, achei massa demais esse conteúdo justamente porque eu estava passando por esses problemas quando um componente começava a receber diversas propriedades e vários if/else dentro dele para fazer a estilização, com o tailwind-variants não terei mais esse problema. Valeu Diegão, conteúdo massa! Parabéns Rocketseat por mostrar ferramentas e maneiras mais produtivas de se programar!

  • @3dwand
    @3dwand ปีที่แล้ว

    Eu não sei como a Rocketseat faz isso, mas literalmente o TH-cam fixou esse vídeo no topo do aplicativo. Saí, fechei o app, atualizei o feed várias vezes e o vídeo continuava lá. 😂 Após muita resistência aqui estou vendo o vídeo.

  • @guchierrez
    @guchierrez ปีที่แล้ว

    muito massa essas libs de Tailwind, composição insana
    uma crítica: tu pronuncia default e success errado e foi chato ficar ouvindo kkkkkkkkkkk

  • @Sr.zangao
    @Sr.zangao หลายเดือนก่อน

    Foda

  • @MrLOPIU22
    @MrLOPIU22 ปีที่แล้ว +1

    acho que o tailwind merge fez mais sentido pra mim. O tailwind variants parece dar uma volta muito grande pra algo que já fazemos de forma mais fácil, legivel e simples.

    • @wellyngtonamaral4097
      @wellyngtonamaral4097 10 หลายเดือนก่อน

      Resumiu praticamente 95% das libs e frameworks de javascript. Faça a mesma coisa de forma diferente.

  • @Cyroobe
    @Cyroobe 8 หลายเดือนก่อน

    Também dá para utilizar a extenção fold para esconder as estilizações

  • @kaykjunior5529
    @kaykjunior5529 ปีที่แล้ว +1

    Esse vídeo caiu do céu, tava tendo dificuldades com isso, código muito poluído

    • @PatrickTimas
      @PatrickTimas ปีที่แล้ว

      Você conhece a biblioteca "shadcn ui"? ele ajuda muito neste aspeto de diminuir a poluição de código.

  • @ebr182
    @ebr182 ปีที่แล้ว

    ouro

  • @vitvitvitvitvitvitvitvit
    @vitvitvitvitvitvitvitvit ปีที่แล้ว +1

    Gostei do tw-merge e tw-variants, mas achei a primeira dica pior do que usar condicional. Parece meio indiferente na verdade e quando for declarar váriais classes ocuparia mais espaço, já que precisa usar o prefixo data-[success]

    • @dieegosf
      @dieegosf ปีที่แล้ว

      É que quando é apenas UMA condicional, fica mais simples mesmo, mas imagina condicionais maiores que são até dependentes entre si, fica uma bagunça!

    • @vitvitvitvitvitvitvitvit
      @vitvitvitvitvitvitvitvit ปีที่แล้ว +1

      @@dieegosf Pode serr. Em alguns casos parece ser útil mesmo, conforme a quantidade de estados

  • @HerlonCosta
    @HerlonCosta 9 หลายเดือนก่อน

    Cara, que da hora!! Diz ai, qual extensão tu usa pra reordenar as classes do Tailwind?

  • @MrFelipefsf
    @MrFelipefsf ปีที่แล้ว

    Gosto de usar o clsx, acho uma mão na roda
    Cva e tailwind Merge estava estudando usar mais, mas parei pq estamos usando SASS no projeto, agora só tenho que praticar bons nomes paras as classes CSS 😅

  • @marcelojuniordaluz5877
    @marcelojuniordaluz5877 ปีที่แล้ว

    Alguem ja usou o windstitch? Diz que ele tem a mesma proposta mas parece ser mais simples.

  • @tiagomaciel2488
    @tiagomaciel2488 ปีที่แล้ว +1

    Ainda não gosto do tailwind para projetos grandes. Simplesmente ele pega acopla tudo em classes e para fazer manipulacao de eventos usando o mesmo como por exemplo ter um componente em que a borda e a cor muda e ele aumenta um pouco de tamanho de acordo com estados que a aplicacao manda já ficaria super "complexo" de ser feito, ainda prefiro abordagem do styled-components e cada componente ter seu próprio style, acho que acaba chegando no mesmo resultado, respeitando o que cada arquivo deveria fazer e manipular.

    • @brenolins9908
      @brenolins9908 ปีที่แล้ว

      Oq vc acha do NativeBase?

    • @tiagoc9754
      @tiagoc9754 ปีที่แล้ว +1

      O problema do styled components é que (até onde sei) ele não é "SSR-friendly"

  • @Henrique-sg9wm
    @Henrique-sg9wm ปีที่แล้ว

    7:58 alguem sabe a extensão que mostra a mensagem de erro 'className is not defined'

  • @CarlosEduardo42
    @CarlosEduardo42 ปีที่แล้ว

    Muito bom, cara... e eu tava organizando isso na mão, utilizando um arquivo Button.modules.css e tipando as variações.

  • @HelenaDuGraus
    @HelenaDuGraus ปีที่แล้ว

    É interessante fazer a parte da responsividade com esse Tailwind variants?

  • @thiagotaveiros5376
    @thiagotaveiros5376 ปีที่แล้ว

    seria bom falar sobre o responsive... estou tentando usar no projeto mas não esta funcionando

  • @natanalonso5271
    @natanalonso5271 ปีที่แล้ว

    como fez pra criar um componente apenas teclando 'c'??

  • @victorMatttosOw
    @victorMatttosOw ปีที่แล้ว

    Ótimo vídeo mano, parabéns!
    Diego, onde eu consigo encontrar as extensões de vs code que vc utiliza ?

  • @mikael.001
    @mikael.001 ปีที่แล้ว +1

    ótimo video

  • @angelilton
    @angelilton ปีที่แล้ว +1

    até entendo quem não é frontend ou é fulllstack no projeto usar tailwind. mas na moral acho isso super bagunçado, se usar styled-componet isso ai fica super facil e agil do mesmo jeito. se não quiser fazer tudo ainda pode meter um material Ui junto e por ai vai

    • @tiagoc9754
      @tiagoc9754 ปีที่แล้ว +1

      Sobre o styled components, ele tem uma limitação pra quem trabalha com SSR, porque ele é processado no front, então pode acontecer da pagina carregar e o estilo ser aplicado depois (piscar). Não sei se mudaram a arquitetura pra resolver isso.
      Sobre o restante do comentário, não tenho conhecimento pra comentar

    • @angelilton
      @angelilton ปีที่แล้ว

      @@tiagoc9754 nunca tivesse esse problema. Sempre usei com nextjs então não sei se é algo que o next já trata

    • @leandrociric5007
      @leandrociric5007 ปีที่แล้ว +3

      @@angelilton Esse problema acontece mais principalmente agora no app router, onde com o styled components todos os components precisam ser ter o "use client" no começo do arquivo, isso gera um evento de hidratação em todas as páginas, e a gente não consegue tirar proveito do streaming SSR que o next introduziu principalmente nessa ultima versão (13.4), se quiser uma lib que tem a abordagem do styled-components mas sem esse side effect de runtime tem o Linaria, que a abordagem ainda é css in js, mas com zero runtime!!

    • @tiagoc9754
      @tiagoc9754 ปีที่แล้ว

      ​@@leandrociric5007obrigado, Leandro. Voltei pra elaborar melhor meu comentário, mas você explicou melhor do que eu

    • @AlvesGames7
      @AlvesGames7 ปีที่แล้ว

      @@leandrociric5007 boa, obrigado!

  • @vladprodan7010
    @vladprodan7010 ปีที่แล้ว

    What font do you use in Visual Studio Code?

  • @luizdodibre_
    @luizdodibre_ ปีที่แล้ว

    Qual pacote de icone você usa diego?

  • @Oculterous
    @Oculterous ปีที่แล้ว

    Show esse tailwind-variants

  • @annakarolinafranz5946
    @annakarolinafranz5946 ปีที่แล้ว

    Cara esse browser que tu usa no Mac qual é???

  • @sidneydev
    @sidneydev ปีที่แล้ว

    Topíssima a dica do TailwindVariants!!!

  • @tiagoc9754
    @tiagoc9754 ปีที่แล้ว

    Por que usam tailwind?

  • @robertosouzadev
    @robertosouzadev ปีที่แล้ว

    Muito bom Diegão, me ajudou bastante!

  • @elioenay
    @elioenay ปีที่แล้ว

    me ajudou demais, você é fera diegão🚀

  • @velhoonp
    @velhoonp ปีที่แล้ว

    Diego vc pode fazer um video mostrando como configurar path-mapping no vite + react + typescript
    ja visitei varios tutoriais e nenhum funciona.

    • @marcelolupatini5553
      @marcelolupatini5553 ปีที่แล้ว +1

      O pacote vite-tsconfig-paths foi o que resolveu esse problema pra mim.

  • @jorgealbmar
    @jorgealbmar ปีที่แล้ว

    No final já podia remover o data-[success] do estilo base, correto?

    • @dieegosf
      @dieegosf ปีที่แล้ว +1

      Simmm

  • @The96tiago
    @The96tiago ปีที่แล้ว

    nesse contexto o class binding do vue faz falta no react

  • @raphaeljcm
    @raphaeljcm ปีที่แล้ว

    Só dica massa, valeu Diegão!

  • @arthur_snow
    @arthur_snow ปีที่แล้ว

    que extensão ou configuração faz com que as classes sejam reorganizadas pra coloca-las em ordem?

    • @ThiagoBRodrigues
      @ThiagoBRodrigues ปีที่แล้ว

      Eu tbm quero saber o nome dessa extensão.

    • @tiagoc9754
      @tiagoc9754 ปีที่แล้ว +2

      É um plugin do prettier prettier-plugin-tailwindcss
      Na documentação oficial fala mais detalhes, mas o TH-cam não deixa eu postar o link

  • @caioribeiro3609
    @caioribeiro3609 ปีที่แล้ว

    Shooww, isso é massa d+!

  • @LucasBernardi23
    @LucasBernardi23 ปีที่แล้ว

    Diego, meu material icon theme nao tem os mesmos icones de pasta que o seu. Tem algum pack personalizado?

    • @leandrociric5007
      @leandrociric5007 ปีที่แล้ว

      É possível personalizar algumas extensões no settings.json do vscode, para quando for alguma extensão em especifico do arquivo atribuir um icone diferente (como por exemplo os arquivos do nest, que tem a mesma nomenclatura do angular), mas creio que essa lib dele não seja mais o material icon theme (posso estar errado)

    • @dieegosf
      @dieegosf ปีที่แล้ว

      Esse é o Symbols

  • @eriiklima
    @eriiklima ปีที่แล้ว +2

    Diegão do céu, ontem a raiva do Tailwind foi o meu pré treino hahahahahaha!
    Porque uma lib que me pediram(cliente) para usar parou de funcionar. Ai eu ja ia usar css-in-js e chakra, mas ia refazer o projeto todo porque os estilos quebraram.
    Esse video salvou o Erik muito obrigado!

  • @EvertonMourinho
    @EvertonMourinho ปีที่แล้ว

    top

  • @thiaguinho_mald
    @thiaguinho_mald ปีที่แล้ว

    Muito bom

  • @wandersonalwes2428
    @wandersonalwes2428 ปีที่แล้ว

    Muito bom!!!

  • @matheusf6540
    @matheusf6540 ปีที่แล้ว +1

    Podia fazer um vídeo ensinando uma forma de ordenar uma tabela no react msm, mas q os dados viessem do banco de dos e conseguisse ordenar a tabela de uma forma q atualizasse no banco de dados. Ex.: como o administrador possa ordenar as categorias de um cardápio online usando o dashboard.
    Fazer a explicação com prisma e next msm

  • @leandro40141
    @leandro40141 ปีที่แล้ว +1

    muito massa diegão. Já vou começa a usar

    • @diogosoares6546
      @diogosoares6546 ปีที่แล้ว

      O Shadcn/ui usa o clsx e o cva nos components, é muito top essa lib

  • @BillRocha
    @BillRocha ปีที่แล้ว

    Tailwind não é profissional!

    • @bbarreto18
      @bbarreto18 ปีที่แล้ว +2

      Bem organizado é sim

    • @heraldo623
      @heraldo623 8 หลายเดือนก่อน +1

      Tailwind não é legível