Tailwind CSS: Estilize Elementos com Classes Utilitárias

Introdução

Neste laboratório, você será introduzido ao Tailwind CSS, um framework CSS "utility-first" (orientado a utilitários) muito popular. Ao contrário do CSS tradicional, onde você escreve classes personalizadas, o Tailwind fornece classes utilitárias de baixo nível que você pode compor diretamente no seu HTML para construir qualquer design. Você aprenderá como configurar o Tailwind via CDN e aplicar classes utilitárias básicas para estilizar um elemento simples de página web para fundo, texto, preenchimento (padding) e layout. Ao final, você terá uma compreensão prática do poder e da velocidade do CSS "utility-first".

O arquivo index.html necessário foi criado para você no diretório ~/project. Você se concentrará em modificar este arquivo para aplicar estilos do Tailwind.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 95%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Adicionar link CDN do Tailwind CSS ao head do HTML

Nesta etapa, você adicionará o Tailwind CSS ao seu projeto. Para configurações rápidas e fins de aprendizado, a maneira mais fácil é usar o CDN do Tailwind CSS. Isso envolve adicionar uma única tag <script> à seção <head> do seu arquivo HTML.

Por que não um arquivo CSS? Ao contrário dos frameworks CSS tradicionais, o Tailwind CSS é "utility-first". Em vez de escrever regras CSS em arquivos externos, você aplicará classes utilitárias pré-construídas diretamente no seu HTML. Essa abordagem elimina completamente a necessidade de arquivos CSS personalizados.

Documentação Oficial: Para referência completa do Tailwind CSS, visite: https://tailwindcss.com/docs

Primeiro, abra o arquivo index.html localizado no diretório ~/project usando o explorador de arquivos no lado esquerdo do WebIDE.

Agora, adicione a seguinte tag <script> dentro da seção <head> do seu arquivo index.html.

<script src="https://cdn.tailwindcss.com"></script>

Após adicionar a linha, seu arquivo index.html deverá ficar assim:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <!-- Tailwind CSS CDN will be added here -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>Hello, Tailwind!</div>
  </body>
</html>

Salve o arquivo pressionando Ctrl+S. Embora você ainda não veja nenhuma mudança visual, as classes utilitárias do Tailwind agora estão disponíveis para uso em seu projeto. Você pode abrir a aba Web 8080 para ver a página sem estilização.

Aplicar classe bg-blue-500 para cor de fundo

Nesta etapa, você aplicará sua primeira classe utilitária do Tailwind para alterar a cor de fundo do elemento <div>. O Tailwind usa uma convenção de nomenclatura bg-{cor}-{sombra} para cores de fundo.

Referência: https://tailwindcss.com/docs/background-color

Usaremos a classe bg-blue-500, que aplica um fundo azul médio.

Abra o arquivo index.html novamente, se ele ainda não estiver aberto. Localize o elemento <div> e adicione class="bg-blue-500" a ele.

<div class="bg-blue-500">Hello, Tailwind!</div>

Seu arquivo index.html completo agora deve se parecer com isto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-blue-500">Hello, Tailwind!</div>
  </body>
</html>

Salve o arquivo (Ctrl+S) e mude para a aba Web 8080. Agora você deverá ver o texto "Hello, Tailwind!" dentro de uma caixa com fundo azul.

Ao contrário de laboratórios anteriores onde você escreve regras CSS em arquivos externos, o Tailwind fornece classes utilitárias pré-construídas que você aplica diretamente no HTML. Nenhuma escrita de CSS personalizada é necessária - apenas componha utilitários como bg-blue-500, text-white e p-4 para construir designs.

Vantagens principais:

Desenvolvimento mais rápido: Estilize diretamente no HTML sem trocar de arquivos
Prototipagem rápida: Construa layouts instantaneamente com classes utilitárias
Design consistente: Escalas padronizadas de espaçamento, cores e tamanhos
Responsivo integrado: Utilitários responsivos mobile-first incluídos
Amigável para IA: O Tailwind é projetado para ser usado com ferramentas de IA como o ChatGPT, facilitando a geração de código.

Usar classe text-white para cor do texto

Nesta etapa, você alterará a cor do texto para torná-lo mais legível contra o fundo azul. Os utilitários de cor de texto do Tailwind seguem um padrão text-{cor}. Para tornar o texto branco, você usará a classe text-white.

Referência: https://tailwindcss.com/docs/text-color

Você pode adicionar várias classes a um elemento separando-as com um espaço dentro do atributo class.

Modifique o <div> no seu arquivo index.html para incluir a classe text-white.

<div class="bg-blue-500 text-white">Hello, Tailwind!</div>

A ordem das classes dentro do atributo class não importa.

Após a alteração, o corpo do seu arquivo index.html ficará assim:

<body>
  <div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>

Salve o arquivo (Ctrl+S) e verifique a aba Web 8080. O texto "Hello, Tailwind!" agora deve estar branco, proporcionando melhor contraste com o fundo azul.

Implementar classe p-4 para preenchimento

Nesta etapa, você adicionará algum espaçamento interno, ou padding, ao elemento <div>. Isso evitará que o texto toque as bordas da caixa azul. O Tailwind fornece utilitários de padding no formato p-{tamanho}.

Referência: https://tailwindcss.com/docs/padding

Usaremos a classe p-4, que aplica uma quantidade média de padding (1rem ou 16px por padrão) a todos os quatro lados do elemento.

Adicione a classe p-4 ao atributo class do seu elemento <div> em index.html.

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

O corpo do seu arquivo index.html agora deve ser:

<body>
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Salve o arquivo (Ctrl+S) e atualize a aba Web 8080. Você notará que agora há espaço entre o texto e a borda da caixa azul, tornando o design mais limpo.

Adicionar classes flex justify-center para layout

Nesta etapa final, você centralizará o elemento <div> estilizado na página. Você pode conseguir isso usando os utilitários Flexbox do Tailwind.

Para fazer isso, você aplicará classes à tag <body> para torná-la um contêiner flex e centralizar seu conteúdo.

flex: Esta classe aplica display: flex ao elemento.
justify-center: Esta classe centraliza os itens flex ao longo do eixo principal (horizontalmente por padrão).
h-screen: Esta classe define a altura do elemento para 100% da altura da viewport, o que é necessário para que a centralização vertical funcione (embora aqui estejamos apenas fazendo a centralização horizontal, é uma boa prática para layouts de página inteira).

Modifique a tag <body> no seu arquivo index.html para adicionar estas classes.

<body class="flex justify-center h-screen">
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Seu arquivo index.html completo agora ficará assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center h-screen">
    <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
  </body>
</html>

Salve o arquivo (Ctrl+S) e visualize o resultado na aba Web 8080. Sua caixa estilizada agora deve estar centralizada horizontalmente na página.

Resumo

Parabéns por completar o laboratório! Você deu seus primeiros passos com sucesso no mundo do Tailwind CSS. Neste laboratório, você aprendeu como integrar o Tailwind a um arquivo HTML usando seu CDN. Em seguida, praticou o conceito central de um framework utility-first aplicando várias classes diretamente aos seus elementos HTML. Agora você está familiarizado com o uso de utilitários para cor de fundo (bg-blue-500), cor do texto (text-white), padding (p-4) e layout Flexbox (flex, justify-center, h-screen). Este conhecimento fundamental o ajudará a construir designs mais complexos e responsivos com rapidez e consistência.

Utilitários CSS Modernos com Tailwind