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.