HTML & CSS - Adicionando o Tailwind CSS ao seu projeto em React

Quer saber mais sobre o nosso Curso Completo de Full Stack? Clique no link abaixo para garantir sua vaga na próxima turma: https://lp.hashtagtreinamentos.com/full-stack/espera/impressionador?fonte=org-yt_uOnYYzl7hpI&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=tailwind-css-react-05-03&conversion=lesfs-mar-25 PARA ACESSAR O MINICURSO GRATUITO DE HTML E CSS (LANDING PAGE): https://pages.hashtagtreinamentos.com/inscricao-minicurso-html-css-landingpage?origemurl=hashtag_yt_org_minihtmlcss_landingpage_uOnYYzl7hpI&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=tailwind-css-react-05-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://dlp.hashtagtreinamentos.com/full-stack/arquivo/download?id=1tzOWn6JSPjQK3Hy4KwdqzAcwC1_qXVNM&origemurl=hashtag_yt_org_arquivofs_uOnYYzl7hpI&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=tailwind-css-react-05-03&conversion=lesfs-mar-25 💻 Recomendação de vídeo: Aprenda a usar o Tailwind CSS em 30 minutos (v4.0) https://youtu.be/7mt89PPWhaY Como sair do ZERO no React em Apenas UMA AULA https://youtu.be/6hiqVVCsA_I Curso Básico de Full Stack (HTML, CSS e JavaScript) https://www.youtube.com/playlist?list=PLpdAy0tYrnKzcqd9knClODBDkghwGpzOJ ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/aprender-react-javascript ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt&origemurl=hashtag_yt_org_incompany_uOnYYzl7hpI&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=tailwind-css-react-05-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- Estilizar aplicações React pode ser desafiador, mas com o Tailwind CSS, você torna esse processo mais rápido, eficiente e organizado! Nesta aula, você aprenderá a integrar o Tailwind CSS ao seu projeto React utilizando Vite, seguindo cada etapa essencial para criar interfaces modernas e responsivas sem precisar escrever CSS tradicional. Vamos trabalhar com o projeto React que iniciamos na aula anterior, aplicando estilos e personalizando o layout para transformar nossa aplicação em algo funcional e visualmente atrativo. Você vai configurar o ambiente corretamente, explorar o sistema de classes utilitárias do Tailwind e aplicar estilos de forma prática e profissional. Além disso, aprenderá a organizar o código, otimizar a responsividade, personalizar componentes e até automatizar a formatação das classes CSS com Prettier. Ao final da aula, seu projeto estará totalmente estilizado, aproveitando todo o poder do Tailwind para criar layouts flexíveis e otimizados. Esse conhecimento será essencial para o desenvolvimento de aplicações cada vez mais bem estruturadas e visualmente impressionantes. Se você quer aprender a estilizar projetos React de forma eficiente e prática usando Tailwind CSS, essa aula é para você! ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 01:35 Instalando as dependências do projeto 03:03 Iniciando o projeto React 04:04 Criando uma pasta para o projeto 05:20 Acessando o Tailwind CSS 06:37 Instalando o Tailwind CSS com Vite 07:38 Configurando o Tailwind no projeto 09:40 Estilizando o título da aplicação com Tailwind 11:57 Ajustando espaçamento e alinhamento da div 13:45 Organizando o código com Tailwind Prettier 16:30 Criando um layout responsivo 20:45 Ajustando a largura dos elementos com Flexbox 21:36 Adicionando espaçamento entre os elementos 22:14 Estilizando o campo de input do aplicativo 23:59 Personalizando o botão "Adicionar" 26:39 Estilizando os itens da lista 29:06 Personalizando o botão "Remover" 29:42 Conclusão #fullstack #htmlecss #html #css #javascript #hashtagprogramacao