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.
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!
Full Stack ImpressionadorEssa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.
Começar agora
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
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
