Neste projeto, desenvolveremos uma página usando Tailwinds CSS. Entendemos a diferença entre o Bootstrap e o Tailwind. Usamos vários recursos e construímos uma página responsiva, com uma estilização bacana e com animações.

Link da última versão do site: https://leonardoalmir.github.io/newsletter

• Vimos algumas maneiras de incorporar o Tailwind CSS em um projeto.

• Tailwind x Bootstrap: principais diferenças entre os frameworks Tailwind e Bootstrap. Utility Classes

• Utility Classes e aplicamos na prática em um projeto.

• Utilizar o Tailwind.config para criar nossas próprias customizações.

• Dispor os elementos com utilitários que modificam o display.

• Alinhar, modificar o tamanho, cor e peso dos textos por meio dos utilitários.

• Espaçamento com formas variadas a width, margin e padding com classes utilitárias no Tailwind.

• Estilizar a caixa dos elementos com utilitários que controlam o border-radius e sombreamentos.

• Estilizar elementos em diferentes estados com o hover e o focus utilizando os utilitários do Tailwind.

• A classe ring, que cria anéis de contorno com box-shadow.

• Responsividade: adaptar o layout para diferentes tamanhos de tela utilizando Breakpoint prefix.

• Utilizar o utilitário group para aplicar estilo no elemento filho com base na modificação do estado do elemento pai.

• Aplicar a animação ping do Tailwind e também como customizar e criar nossas próprias animações.