Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Curso base de React Native 2025: #47 - Configurando o tema do tailwind css
Play lesson

📱Curso base de React Native - React Native Completo: +78 Aulas do Zero à DOIS apps prontos - Curso base de React Native 2025: #47 - Configurando o tema do tailwind css

4.0 (1)
23 learners

What you'll learn

This course includes

  • 25.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso Base de React Native nós vamos avançar ainda mais na configuração do NativeWind, agora criando o nosso próprio tema personalizado. Até aqui trabalhamos apenas com as classes padrão, mas chegou o momento de deixar o projeto com a identidade visual do protótipo que estamos seguindo. Isso significa que vamos definir cores, fontes, tamanhos de texto e até o border radius diretamente no arquivo de configuração do Tailwind, permitindo que o app fique padronizado e muito mais fácil de manter. Durante a aula você vai ver na prática como estender o tema do Tailwind CSS, criando variáveis de cor personalizadas e aplicando elas dentro do app. Vamos configurar fontes, tamanhos de texto e até ajustes de bordas para que o design se aproxime ao máximo do planejado no Figma. Também vamos explorar como usar essas novas classes diretamente nos componentes React Native, substituindo estilos fixos e repetitivos por classes simples e intuitivas. Para facilitar ainda mais, você vai aprender a configurar a extensão oficial no VS Code para habilitar o autocomplete das classes, o que agiliza muito a escrita do código. Ao final, o seu projeto estará com um tema totalmente configurado, pronto para receber as telas e componentes que vamos construir a seguir. Essa base é fundamental porque garante consistência visual em todo o app, além de tornar o processo de estilização muito mais produtivo. Se você quer dar ao seu aplicativo uma identidade profissional e aprender como deixar a configuração do NativeWind no ponto certo para projetos reais, essa é uma aula que você não pode deixar passar. Links mencionados no vídeo: 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com 🖥️ Protótipo no Figma: https://www.figma.com/community/file/1543675168225105299 📖 Repositório: https://github.com/lvsouza/youtube-react-native-forca-play/tree/e8988d3d97b91112bcce1c4985be99c1022ea406 🎮 App na Google Play: https://play.google.com/store/apps/details?id=com.lvsouzadev.forcaplay 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 Meu setup: 📺 Monitor 24: https://amzn.to/4msD7TY 🤖 Processador: https://amzn.to/4oJLZpN 🎧 Fone bluetooth: https://amzn.to/4lESd7r ⌨️ Teclado e mouse: https://amzn.to/4oPdgHu 💪 Suporte articulado: https://amzn.to/41hIrRE Conteúdo: 0:00 | Introdução da aula 0:40 | Avisos importantes 1:36 | Utilizando o tema pré-configurado do tailwind css 3:47 | Estendendo o tema do tailwind css 8:05 | Alterando o arquivo para TS 9:40 | Finalização e agradecimentos CODARSE - Estilização e tema com NativeWind #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere