Aulas
Disciplinas

Cursos / Informática para Internet / Plataformas de aplicações Web / Aula

arrow_back Aula 03 - Bibliotecas de componentes UI - Parte 2

Tailwind CSS - Características

Abaixo temos uma página pura HTML, sem o TailwindCSS, mas com alguns elementos padrão do HTML como H1, H2, H3, UL, LI e A:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
 <h1>Minha página com o Tailwind CSS</h1>

 <h2>H2 personalizado</h2>
  <h3>H3 personalizado</h3>

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
 </ul>

 <a href="https://tailwindcss.com/">https://tailwindcss.com/</a>
</body>
</html>

Veja o resultado dessa página HTML pura (Sem o Tailwind CSS): Descrição imagemPágina em HTML puro, sem nenhuma biblioteca. Fonte: Autor

Agora vamos somente adicionar o Tailwind CSS acrescentando a referência ao CDN em que ele está hospedado:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <!-- Adicionando o Tailwind CSS-->
 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
 <h1>Minha página com o Tailwind CSS</h1>

 <h2>H2 personalizado</h2>
  <h3>H3 personalizado</h3>

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
 </ul>

 <a href="https://tailwindcss.com/">https://tailwindcss.com/</a>
</body>
</html>

Adicionamos somente a linha do CDN do Tailwind e veja agora como a página ficou:

Descrição imagemPágina HTML com o Tailwind CSS adicionado. Fonte: Autor

Repare que todos os elementos perderam o estilo padrão que o HTML oferece.

Esse comportamento do Tailwind é algo proposital. Isso faz com que você não tenha problemas com diferentes navegadores tentando exibir elementos HTML de maneira distinta, o que pode quebrar a coerência visual do seu site. Além disso, dificilmente um sistema vai usar os estilos padrão do HTML e precisa de toda forma os substituir por outros mais agradáveis e modernos, então no fim das contas está se ganhando mais que perdendo quando se começa do zero.

Como uma biblioteca que remove meus estilos vai me ajudar? você pode se perguntar? Calma. A seguir vamos ver um exemplo da própria documentação do Tailwind para que você entenda melhor como podemos personalizar com bastante liberdade nossas páginas com essa ferramenta.


Versão 5.3 - Todos os Direitos reservados