Tailwind

O que é

Tailwind Css é um framework de CSS de baixo nível, com foco em utilidade e customização.

Ao contrário dos frameworks de css mais famosos, que fornecem classes de estilização de componentes, o Tailwind fornece apenas classes utilitárias que são customizáveis.

Instalação

Passo a passo

Exemplo

No exemplo abaixo, foi criado um botão com estilização básica, como: cor de fundo, cor do texto, padding nos eixos x e y (py e px), arredondamento das bordas (rounded) e efeito de hover, com transição de 500ms.

<button
  class="bg-blue-500
    text-white
    py-2
    px-4
    rounded
    hover:bg-blue-600
    transition
    duration-500"
>
  Botão
</button>

Tópicos importantes

Links externos

Projeto para praticar

  • Criar uma página com sidebar, footer e conteúdo
  • Criar um componente Card com imagem, nome e informações genéricas
  • Montar uma página com diversos cards, que se adapte a diferentes tamanhos de tela
← Styled ComponentsTWA →