Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula intensa do curso avançado de React, a gente aprofunda ainda mais o uso do Tailwind CSS dentro do projeto, indo muito além da instalação. Eu te mostro como fiz a migração parcial do nosso código de CSS Modules para Tailwind, e aproveito para explicar várias boas práticas que vão facilitar bastante a tua jornada com estilização baseada em utilitários. Além disso, exploro situações reais do projeto que podem gerar dúvidas, como a aplicação de gradientes, e te ensino como reaproveitar esses estilos com eficiência usando as layers e a função @apply. Você vai aprender a organizar seus estilos em camadas como base, theme e components, centralizando configurações que se repetem e tornando o código mais limpo, performático e escalável. Também te mostro como criar temas personalizados com variáveis de cor reutilizáveis, e como lidar com efeitos como hover e active diretamente nas tuas classes. Tudo isso com exemplos práticos no Visual Studio Code, explicando o passo a passo com clareza para que tu entenda a lógica por trás de cada escolha técnica. Essa aula é um divisor de águas para quem quer escrever CSS moderno, reutilizável e mais conectado com o dia a dia de times profissionais que usam Tailwind em produção. Mesmo se tu ainda estiver se adaptando ao novo formato, essa aula vai abrir tua mente para as vantagens de migrar seu CSS tradicional para uma abordagem mais dinâmica e inteligente. Dá o play e vem comigo para dominar de vez o Tailwind CSS no mundo real. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/1bc2459c1b3a61567380fe2c8b1252dcc5c293df 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:20 | Avisos importantes 0:35 | Como trabalhar com gradientes no tailwindcss 4:20 | Como funciona as layers no tailwindcss 6:20 | Criando uma classe personalizada com classes tailwindcss 10:20 | Como trabalhar com css global com tailwindcss 11:50 | Trabalhando com a layer components do tailwindcss 16:50 | Evite fazer isso ou você terá problemas 17:52 | Como criar um tema dentro do tailwindcss 19:50 | Finalização e agradecimentos CODARSE - [Membros apenas] Tratamento avançado de CSS #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação
