Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Curso avançado de React: #16 - Dicas e truques com o tailwindcss que vão salvar o seu projeto
Play lesson

Curso base de React - Curso Completo de React – Do Zero à Prática com TypeScript - Curso avançado de React: #16 - Dicas e truques com o tailwindcss que vão salvar o seu projeto

5.0 (1)
21 learners

What you'll learn

This course includes

  • 11.3 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 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

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