3 Tips for Scaling React Apps with TailwindCSS
Вставка
- Опубліковано 25 чер 2024
- 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
![[Passo a Passo] Firebase - Como usar React Native com Firebase?](http://i.ytimg.com/vi/Fv8xNcXSqVI/mqdefault.jpg)
qual o tema do vscode?
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 💜
Min Theme
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!
Ja conhecia o CVA, mas esse TailwindVariants é mais abrangente mesmo, e faz ai a continuação mostrando a Slot API, por favor.
Up
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... 😅
Só pagar o curso da rocketseat pae
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
No ignite tem exemplos bem mais abrangentes e complexos.
Que show, estava com querendo saber sobre isso hoje hahaha Valeu pelo video!
Até no "trono" seus vídeos são bem vindos
True
me ajudou demais, você é fera diegão🚀
Só dica massa, valeu Diegão!
Video massa diegão. Amei a diga da estilização condicional usando um data atribute. Salve
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.
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
Estou adorando usar tailwind, obrigado pelas dicas.
Muito bom Diegão, me ajudou bastante!
Dica fantastica, eu tava prourando algo assim para criar um design system.
Shooww, isso é massa d+!
Muito bom, cara... e eu tava organizando isso na mão, utilizando um arquivo Button.modules.css e tipando as variações.
Topíssima a dica do TailwindVariants!!!
Show esse tailwind-variants
Ótimo vídeo mano, parabéns!
Diego, onde eu consigo encontrar as extensões de vs code que vc utiliza ?
Muito bom!!!
Cara, que da hora!! Diz ai, qual extensão tu usa pra reordenar as classes do Tailwind?
Também dá para utilizar a extenção fold para esconder as estilizações
muito bom mesmo, tu é foda
ótimo video
Eu não sei como a Rocketseat faz isso, mas literalmente o UA-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.
Muito bom
Ú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
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!
queria essa sequência dos slots tbm! Aguardando
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 😅
nesse contexto o class binding do vue faz falta no react
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.
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.
@@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.
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...
@@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
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
Diego no curso de Nextjs do Ignite é abordado sobre todas essas boas práticas ensinadas aqui no canal da Rockeseat do YT?
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!
@@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.
Fala Luan, aqui no UA-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.
@@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.
@@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.
top
muito massa diegão. Já vou começa a usar
O Shadcn/ui usa o clsx e o cva nos components, é muito top essa lib
seria bom falar sobre o responsive... estou tentando usar no projeto mas não esta funcionando
É interessante fazer a parte da responsividade com esse Tailwind variants?
Qual pacote de icone você usa diego?
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.
Resumiu praticamente 95% das libs e frameworks de javascript. Faça a mesma coisa de forma diferente.
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!
What font do you use in Visual Studio Code?
Esse vídeo caiu do céu, tava tendo dificuldades com isso, código muito poluído
Você conhece a biblioteca "shadcn ui"? ele ajuda muito neste aspeto de diminuir a poluição de código.
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
Cada dia Eles usam alguma coisa diferente, você termina um curso e já está totalmente " desatualizado"
Cara esse browser que tu usa no Mac qual é???
Diego vc pode fazer um video mostrando como configurar path-mapping no vite + react + typescript
ja visitei varios tutoriais e nenhum funciona.
O pacote vite-tsconfig-paths foi o que resolveu esse problema pra mim.
como fez pra criar um componente apenas teclando 'c'??
7:58 alguem sabe a extensão que mostra a mensagem de erro 'className is not defined'
ouro
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
Por que usar o pnpm ao invés dos mais tradicionais npm e yarn?
PNPM lida melhor com cache e é mais eficiente em economia de espaço em disco.
No final já podia remover o data-[success] do estilo base, correto?
Simmm
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]
É que quando é apenas UMA condicional, fica mais simples mesmo, mas imagina condicionais maiores que são até dependentes entre si, fica uma bagunça!
@@dieegosf Pode serr. Em alguns casos parece ser útil mesmo, conforme a quantidade de estados
Diego, meu material icon theme nao tem os mesmos icones de pasta que o seu. Tem algum pack personalizado?
É 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)
Esse é o Symbols
que extensão ou configuração faz com que as classes sejam reorganizadas pra coloca-las em ordem?
Eu tbm quero saber o nome dessa extensão.
É um plugin do prettier prettier-plugin-tailwindcss
Na documentação oficial fala mais detalhes, mas o UA-cam não deixa eu postar o link
muito massa essas libs de Tailwind, composição insana
uma crítica: tu pronuncia default e success errado e foi chato ficar ouvindo kkkkkkkkkkk
Alguem ja usou o windstitch? Diz que ele tem a mesma proposta mas parece ser mais simples.
Por que usam tailwind?
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.
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.
Oq vc acha do NativeBase?
O problema do styled components é que (até onde sei) ele não é "SSR-friendly"
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
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
@@tiagoc9754 nunca tivesse esse problema. Sempre usei com nextjs então não sei se é algo que o next já trata
@@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!!
@@leandrociric5007obrigado, Leandro. Voltei pra elaborar melhor meu comentário, mas você explicou melhor do que eu
@@leandrociric5007 boa, obrigado!
É melhor fazer direto no arquivo Tailwind, temos que parar de usar tantos frameworks
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.
Tailwind não é profissional!
Bem organizado é sim
Tailwind não é legível