Aprenda a usar o Tailwind CSS em 30 minutos (v4.0)

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_7mt89PPWhaY&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=aprenda-tailwind-24-02&conversion=lesfs-fev-25 PARA ACESSAR O MINICURSO GRATUITO DE HTML E CSS (LANDING PAGE): https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_7mt89PPWhaY&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=aprenda-tailwind-24-02&conversion=lesfs-fev-25 ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://dlp.hashtagtreinamentos.com/full-stack/arquivo/download?id=1r2I16Ev1PaWNxp-mMtkAMwD_KlmPsTJI&origemurl=hashtag_yt_org_arquivofs_7mt89PPWhaY&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=aprenda-tailwind-24-02&conversion=lesfs-fev-25 💻 Recomendação de vídeo: Aprenda Bootstrap em 24 minutos: Guia Rápido e Prático https://youtu.be/maoHDmRu3z4 Como o TailwindCss te Ajuda em seus Projetos Comerciais https://youtu.be/Ksc1hKDOoM8 ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/tailwind-css-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt&origemurl=hashtag_yt_org_incompany_7mt89PPWhaY&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=aprenda-tailwind-24-02&conversion=lesfs-fev-25 ----------------------------------------------------------------------- Quer estilizar suas páginas da web de forma rápida e sem complicação? Com o Tailwind CSS, você cria layouts modernos sem precisar escrever CSS tradicional! Neste vídeo, vou te mostrar, de forma prática e objetiva, como integrar o Tailwind CSS 4.0 ao seu projeto e explorar seus recursos para estilizar uma página do zero. Vamos aplicar classes utilitárias diretamente no HTML, garantindo um fluxo de trabalho ágil e eficiente. Em apenas 30 minutos, você aprenderá a desenvolver interfaces responsivas e estilizadas, aproveitando a flexibilidade e a performance do Tailwind CSS. E o melhor? Você não precisa decorar classes complexas ou perder tempo ajustando estilos manualmente. O Tailwind otimiza seu desenvolvimento e permite que você foque no que realmente importa: criar interfaces incríveis! É claro que, se você já souber e dominar o CSS padrão, conseguirá aproveitar ainda mais o Tailwind com eficiência! Mas se está começando, não se preocupe: este guia vai te ajudar a entender tudo na prática! Então, se você quer otimizar seu fluxo de trabalho e elevar o nível do seu desenvolvimento Full Stack, vem com a gente e aprenda tudo sobre essa nova versão do Tailwind CSS agora mesmo! ----------------------------------------------------------------------- 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 02:22 Criando o arquivo para o Tailwind CSS 03:02 Acessando o site e a documentação do Tailwind CSS 03:50 Instalando o Tailwind CSS via CDN 05:33 Acessando as ferramentas do desenvolvedor 06:12 Como utilizar a documentação do Tailwind CSS 07:22 Alterando o peso da fonte com Tailwind CSS 07:58 O que é um CDN? 08:22 Modificando o tamanho da fonte 09:19 Ativando o Tailwind IntelliSense 11:05 Mudando a família da fonte (font-family) 12:57 Personalizando as cores com Tailwind CSS 15:35 Flexbox: Usando display flex 17:00 Ajustando o espaçamento e alinhamento do header 18:55 Modificando a cor do header com Tailwind CSS 19:30 Alterando o padding das seções 20:50 Mudando o tamanho e o peso dos títulos H2 21:37 Ajustando o espaçamento das seções 22:33 Adicionando borda na seção "Sobre Mim" 23:47 Estilizando a seção de Habilidades 27:30 Estilizando a seção de Projetos 29:04 Personalizando os links da página (âncoras) 29:32 Adicionando efeito hover com Tailwind CSS 30:45 Estilizando o rodapé da seção de Contato 32:50 Conclusão #htmlecss #fullstack #htmlcss #html #css #hashtagprogramacao