3 Tips for Scaling React Apps with TailwindCSS

[@DanielRodrigues-xu2rq]

qual o tema do vscode?

[@rocketseat]

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]

Min Theme

[@LucasSouza-ev2wb]

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!

[@diogosoares6546]

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

[@zevdvlpr]

Up

[@isonhar]

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

[@zevdvlpr]

True

[@EvertJunior]

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]

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

[@neliodiassantos]

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

[@devmts]

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

[@raphaeljcm]

Só dica massa, valeu Diegão!

[@AndreOlive]

Estou adorando usar tailwind, obrigado pelas dicas.

[@elioenay]

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

[@sidneydev]

Topíssima a dica do TailwindVariants!!!

[@robertosouzadev]

Muito bom Diegão, me ajudou bastante!

[@Cyroobe]

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

[@luancoelho1983]

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

[@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]

@@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]

Fala Luan, aqui no KZbin 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]

@@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]

@@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.

[@caioribeiro3609]

Shooww, isso é massa d+!

[@principe.borodin]

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

[@CarlosEduardo42]

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

[@Oculterous]

Show esse tailwind-variants

[@3dwand]

Eu não sei como a Rocketseat faz isso, mas literalmente o KZbin 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.

[@marceloviannadev]

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]

Só pagar o curso da rocketseat pae

[@marceloviannadev]

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]

No ignite tem exemplos bem mais abrangentes e complexos.

[@LuisGustavo-um4hs]

uai quer que coda pra você também KKKKKKK

[@marceloviannadev]

@@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.

[@luisguilhermeselenko3579]

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]

queria essa sequência dos slots tbm! Aguardando

[@HerlonCosta]

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

[@leandro40141]

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

[@diogosoares6546]

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

[@Henrique-sg9wm]

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

[@velhoonp]

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

[@marcelolupatini5553]

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

[@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 😅

[@fabiomoraes013]

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]

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]

@@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]

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]

​@@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

[@victorMatttosOw]

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

[@ribeiro.evandro]

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

[@wandersonalwes2428]

Muito bom!!!

[@mikael.001]

ótimo video

[@The96tiago]

nesse contexto o class binding do vue faz falta no react

[@thiagotaveiros5376]

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

[@Brenosalv]

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

[@dieegosf]

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

[@HelenaDuGraus]

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

[@evandr000]

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]

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

[@annakarolinafranz5946]

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

[@vitvitvitvitvitvitvitvit]

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]

É 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]

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

[@kaykjunior5529]

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

[@PatrickTimas]

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

[@jorgealbmar]

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

[@dieegosf]

Simmm

[@eriiklima]

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!

[@yanderalves1619]

Ú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

[@natanalonso5271]

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

[@arthur_snow]

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

[@ThiagoBRodrigues]

Eu tbm quero saber o nome dessa extensão.

[@tiagoc9754]

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

[@vladprodan7010]

What font do you use in Visual Studio Code?

[@MrLOPIU22]

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]

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

[@Sr.zangao]

Foda

[@luizdodibre_]

Qual pacote de icone você usa diego?

[@LucasBernardi23]

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

[@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]

Esse é o Symbols

[@thiaguinho_mald]

Muito bom

[@ebr182]

ouro

[@marcelojuniordaluz5877]

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

[@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

[@angelilton]

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]

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]

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

[@leandrociric5007]

@@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]

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

[@AlvesGames7]

@@leandrociric5007 boa, obrigado!

[@tiagomaciel2488]

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]

Oq vc acha do NativeBase?

[@tiagoc9754]

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

[@rcodev]

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.

[@tiagoc9754]

Por que usam tailwind?

[@matheusf6540]

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

[@EvertonMourinho]

top

[@markqsantos7613]

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

[@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.

[@ricardobastos242]

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

[@BillRocha]

Tailwind não é profissional!

[@bbarreto18]

Bem organizado é sim

[@heraldo623]

Tailwind não é legível