3 Tips for Scaling React Apps with TailwindCSS

Рет қаралды 39,851

Күн бұрын

We know that styling is a crucial part of frontend projects. There are many ways to create a beautiful, organized, and visually appealing website.
Diego has been using Tailwind to build his React projects for some time now. With each new experiment of this combination, we have fresh and exclusive content to bring to the channel.
So, if you are also creating React projects using Tailwind, pay attention to these golden tips that Diegão has prepared for you.
Are you ready to code?
Follow Rocketseat on social media:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

Пікірлер: 104

@DanielRodrigues-xu2rq 11 ай бұрын

qual o tema do vscode?

@rocketseat 11 ай бұрын

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 10 ай бұрын

Min Theme

@diogosoares6546 11 ай бұрын

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

@zevdvlpr 11 ай бұрын

@neliodiassantos 11 ай бұрын

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

@isonhar 11 ай бұрын

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

@zevdvlpr 11 ай бұрын

True

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

@elioenay 9 ай бұрын

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

@AndreOlive 11 ай бұрын

Estou adorando usar tailwind, obrigado pelas dicas.

@tarcisioteixeira9045 11 ай бұрын

Video massa diegão. Amei a diga da estilização condicional usando um data atribute. Salve

@raphaeljcm 11 ай бұрын

Só dica massa, valeu Diegão!

@robertosouzadev 10 ай бұрын

Muito bom Diegão, me ajudou bastante!

@EvertJunior 11 ай бұрын

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 6 ай бұрын

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

@caioribeiro3609 11 ай бұрын

Shooww, isso é massa d+!

@principe.borodin 11 ай бұрын

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

@CarlosEduardo42 11 ай бұрын

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

@sidneydev 11 ай бұрын

Topíssima a dica do TailwindVariants!!!

@wandersonalwes2428 11 ай бұрын

Muito bom!!!

@Oculterous 11 ай бұрын

Show esse tailwind-variants

@DelphiPraVida 5 ай бұрын

muito bom mesmo, tu é foda

@Cyroobe 5 ай бұрын

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

@Figmafordevs 11 ай бұрын

Muito bom

@victorMatttosOw 11 ай бұрын

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

@mikael.001 11 ай бұрын

ótimo video

@HerlonCosta 7 ай бұрын

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

@marceloviannadev 10 ай бұрын

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

@user-ko9cb7qy5s 5 ай бұрын

Só pagar o curso da rocketseat pae

@marceloviannadev 5 ай бұрын

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 🤘 ...@@user-ko9cb7qy5s

@matheusmczvieira 20 күн бұрын

No ignite tem exemplos bem mais abrangentes e complexos.

@EvertonMourinho 11 ай бұрын

top

@3dwand 11 ай бұрын

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

@The96tiago 11 ай бұрын

nesse contexto o class binding do vue faz falta no react

@MrFelipefsf 11 ай бұрын

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 😅

@luisguilhermeselenko3579 11 ай бұрын

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 11 ай бұрын

queria essa sequência dos slots tbm! Aguardando

@leandro40141 11 ай бұрын

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

@diogosoares6546 11 ай бұрын

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

@ribeiro.evandro 11 ай бұрын

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

@vladprodan7010 11 ай бұрын

What font do you use in Visual Studio Code?

@fabiomoraes5597 11 ай бұрын

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 11 ай бұрын

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 11 ай бұрын

@@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 10 ай бұрын

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 27 күн бұрын

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

@thiagotaveiros5376 10 ай бұрын

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

@HelenaDuGraus 9 ай бұрын

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

@ebr182 11 ай бұрын

ouro

@eriiklima 11 ай бұрын

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!

@luizdodibre_ 11 ай бұрын

Qual pacote de icone você usa diego?

@luancoelho1983 11 ай бұрын

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

@leandrociric5007 11 ай бұрын

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 11 ай бұрын

@@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 11 ай бұрын

Fala Luan, aqui no KZfaq 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 11 ай бұрын

@@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 10 ай бұрын

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

@yanderalves1619 3 ай бұрын

Ú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

@annakarolinafranz5946 11 ай бұрын

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

@MrLOPIU22 11 ай бұрын

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 7 ай бұрын

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

@Henrique-sg9wm 11 ай бұрын

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

@natanalonso5271 9 ай бұрын

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

@kaykjunior5529 11 ай бұрын

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

@PatrickTimas 11 ай бұрын

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

@velhoonp 11 ай бұрын

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

@marcelolupatini5553 11 ай бұрын

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

@matheusf6540 11 ай бұрын

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

@evandr000 11 ай бұрын

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 11 ай бұрын

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

@guchierrez 11 ай бұрын

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

@jorgealbmar 11 ай бұрын

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

@dieegosf 11 ай бұрын

Simmm

@vitvitvitvitvitvitvitvit 11 ай бұрын

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 11 ай бұрын

É 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 11 ай бұрын

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

@tiagoc9754 11 ай бұрын

Por que usam tailwind?

@LucasBernardi23 11 ай бұрын

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

@leandrociric5007 11 ай бұрын

É 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 11 ай бұрын

Esse é o Symbols

@Brenosalv 11 ай бұрын

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

@dieegosf 11 ай бұрын

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

@marcelojuniordaluz5877 11 ай бұрын

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

@arthur_snow 11 ай бұрын

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

@ThiagoBRodrigues 11 ай бұрын

Eu tbm quero saber o nome dessa extensão.

@tiagoc9754 11 ай бұрын

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

@rcodev 11 ай бұрын

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.

@tiagomaciel2488 11 ай бұрын

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 11 ай бұрын

Oq vc acha do NativeBase?

@tiagoc9754 11 ай бұрын

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

@angelilton 11 ай бұрын

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 11 ай бұрын

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 11 ай бұрын

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

@leandrociric5007 11 ай бұрын

@@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 11 ай бұрын

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

@AlvesGames7 11 ай бұрын

@@leandrociric5007 boa, obrigado!

@markqsantos7613 11 ай бұрын

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

@marceloviannadev 10 ай бұрын

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.