Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end.
Neste artigo, vamos descobrir como criar layouts modernos e responsivos, com exemplos práticos utilizando a configuração de uma página de portfólio.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
O que é Tailwind CSS?
O Tailwind CSS é um framework de utilitários que permite desenvolver layouts modernos e responsivos de forma rápida, utilizando classes pré-definidas diretamente no HTML.
Se você não conhece o CSS, nós temos uma publicação com um curso básico de HTML, CSS e JavaScript que ensina essa linguagem do zero!
Se você está familiarizado com CSS, vai ver que cada classe do Tailwind representa uma propriedade CSS, facilitando a criação de designs únicos sem complicações.
Diferente de outros frameworks que trazem estilos fixos, o Tailwind oferece uma abordagem altamente personalizável, permitindo combinar e compor estilos conforme as necessidades do projeto.
Essa flexibilidade e praticidade fazem o Tailwind ideal tanto para pequenos sites quanto para aplicações web complexas, acelerando o desenvolvimento e simplificando a manutenção dos layouts.
Configurando o ambiente
Para começar, baixe os arquivos da aula e abra o VS Code. Se precisar de auxílio, consulte o nosso guia de VS Code.
Nos arquivos da aula, você encontrará as pastas com arquivos HTML, CSS e Tailwind. Se quiser fazer manualmente, do zero, a parte do Tailwind, crie uma nova pasta chamada “3 – Tailwind”, copie o arquivo HTML para essa pasta e renomeie.
Veja como é nossa página de portfólio apenas com a estrutura HTML.
Instalando o Tailwind
Acesse o site oficial do Tailwind CSS e vá até a seção Docs para ver as instruções de instalação. Nesta aula, optamos pela instalação via CDN. Se estiver construindo o arquivo Tailwind do zero, copie o script disponibilizado, que contém o link do Play CDN, e cole-o dentro da tag <head> da estrutura HTML.
Em seguida, clique com o botão direito no arquivo pelo VS Code e selecione Open Live Server ou simplesmente abra com o browser.
Se a página apresentar um visual como o da imagem abaixo, isso indica que o Tailwind já está funcionando corretamente!
Configurando nosso CSS com Tailwind
Agora que o Tailwind CSS está ativo, explore as classes que ele oferece para estilizar seu projeto. Por exemplo, para aplicar negrito a um título, use a classe font-bold.
Títulos e fonte
Para ajustar o tamanho da fonte, combine essa classe com outras, como text-3xl. Dessa forma, seu título pode ser definido como
<h1 class="font-bold text-3xl">Portfolio – Diego XYZ</h1>
Para alterar o tipo de fonte do corpo da página, adicione a classe font-[Montserrat] à tag <body>.
Da mesma forma, para definir as cores do texto e do fundo, consulte a documentação do Tailwind CSS e utilize classes como text-white e bg-stone-800, resultando em um layout moderno e harmonioso.
<body class="font-[Montserrat] text-white bg-stone-800">
Veja como já mudou:
Utilizando o Flexbox com Tailwind
Se você ainda não conhece o recurso Flexbox do CSS, aprenda as noções essenciais para um layout flexível.
O Tailwind CSS simplifica a implementação do Flexbox para a criação de layouts responsivos. Para utilizar, basta adicionar a classe flex ao elemento desejado para ativar o display flex.
<header class="flex justify-between items-center py-6 px-10 bg-stone-900">
Para garantir uma estrutura limpa e organizada, utilizamos a classe p-10 para adicionar um espaçamento interno consistente em todos os lados do elemento, evitando que o conteúdo fique muito próximo das bordas.
Além disso, a classe flex-col ativa o layout flex e organiza os itens em coluna, enquanto a classe gap-4 estabelece um espaçamento uniforme entre eles.
Por fim, ao adicionar border-b border-gray-600, inserimos uma linha inferior que não só separa visualmente as seções, mas também reforça a estrutura do layout.
<section class”p-10 flex flex-col gap-4 border-b border-gray-600”>
Dica: você pode digitar em várias linhas e alterar a classe de várias sections ao mesmo tempo pressionando ctrl+d para selecionar as próximas uma de cada vez.
Organizando Conteúdo e Projetos
Na seção de habilidades, o uso do Flexbox aliado a classes de espaçamento, como gap-8, organiza as informações sobre Linguagens e Tecnologias em colunas bem definidas. As listas podem ser estilizadas com list-disc para itens com marcadores ou list-decimal para itens numerados, conforme mostrado na estrutura dos blocos de Linguagens e Tecnologias.
<div class="flex gap-8">
<div class="flex flex-col gap-4">
<h3 class="font-bold text-xl">Linguagens</h3>
<ul class="list-disc ml-4">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div class="flex flex-col gap-4">
<h3 class="font-bold text-xl">Tecnologias</h3>
<ol class="list-decimal ml-4">
<li>React</li>
<li>Node</li>
<li>Express JS</li>
<li>Vite</li>
<li>SASS</li>
<li>Tailwind</li>
</ol>
</div>
</div>
Veja como ficou:
No bloco de projetos, os elementos são agrupados em uma div com a classe flex gap-5, e cada projeto é encapsulado em uma div com flex flex-col gap-3, garantindo um espaçamento adequado entre as imagens e os links.
<div class="flex gap-5"> <div class="flex flex-col gap-3">...</div> <div class="flex flex-col gap-3">...</div> <div class="flex flex-col gap-3">...</div> </div>
Para os links, a classe underline hover:text-blue-300 proporciona um efeito visual agradável quando o usuário passa o mouse.
<a
target="_blank"
class="underline hover:text-blue-300"
href="https://www.youtube.com/live/w7sIMxxVELs"
>Clique aqui para acessar</a
>Ajustando o Footer
No final da página, o footer é configurado para manter um layout centralizado e espaçado. Utilizando as classes flex flex-col gap-4 items-center text-center, as informações de contato são exibidas de forma organizada, facilitando a visualização dos dados como e-mail, telefone e link para o site.
<footer class="p-10 flex flex-col gap-4 items-center text-center">
Você pode conferir o código completo nos arquivos da aula, que ilustram a aplicação prática de todos esses conceitos!
Conclusão – Tailwind CSS
Nesta aula, exploramos desde a configuração inicial do ambiente no VS Code até a implementação prática do Tailwind CSS.
Aprendemos a incorporar o CDN, a utilizar as classes de utilitários para ajustar tipografia, cores e layout, e a aplicar o Flexbox para criar uma estrutura responsiva.
Com o Tailwind CSS, você pode desenvolver projetos web de forma rápida e eficiente, obtendo um design moderno e altamente personalizável. Aproveite os recursos apresentados para aprimorar seus projetos e explorar novas possibilidades no desenvolvimento web.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- Funções do Copilot no Excel que vão TRANSFORMAR seu Trabalho
Você sabia que o Copilot no Excel faz muito mais do que tirar dúvidas? Essa IA pode criar fórmulas, formatar dados e até gerar gráficos por você. - Automação Whatsapp Web com com Python: Guia Completo para Enviar Mensagens com PyWhatKit Você já imaginou programar o envio de mensagens com uma automação WhatsApp Web com poucas linhas de código?
- 30 Frases de Small Talk em Inglês: Tenha Conversas Naturais em Inglês Domine o Small Talk em Inglês com 30 frases práticas para conversas rápidas. Aprenda a pronúncia, os usos e dicas para falar com mais naturalidade.
Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.