Guia de Tailwind CSS

1. Layouts (Flex, Grid, Position)

Layouts são responsáveis pela organização dos elementos na tela. Tailwind oferece várias formas de posicionar e distribuir conteúdo:

Flexbox

O Flexbox permite alinhar e distribuir itens em linhas ou colunas. Use flex, justify-*, items-*.

Item 1
Item 2
Item 3

Grid

O Grid permite organizar elementos em linhas e colunas. Use grid, grid-cols-*, gap-*.

1
2
3

Position

Controla o posicionamento com relative, absolute, fixed, top-0, left-0, etc.

Absoluto
Outro

2. Breakpoints e Responsividade

Tailwind usa prefixos para aplicar estilos em diferentes larguras de tela. Ex: sm:, md:, lg:, xl:, 2xl:.

Este container é responsivo e se adapta aos breakpoints do Tailwind.

sm
md
lg

3. Aspect Ratio & Columns

Aspect Ratio controla proporção de largura/altura.
Columns divide texto ou elementos em colunas múltiplas.

Texto em coluna 1. Lorem ipsum dolor sit amet...

Texto em coluna 2. Sed ut perspiciatis unde omnis...

4. Espaçamento e Alinhamento

Utilitários como p-* (padding), m-* (margin) e space-x|y-* controlam espaçamentos internos, externos e entre itens.

space-y
p (padding)
m (margin)

5. Cores

Tailwind possui uma vasta paleta de cores organizadas por tonalidade. Ex: bg-blue-500, text-red-300.

red-500
blue-500
green-500
yellow-500
pink-500
gray-800

6. Tipografia

Utilize classes como text-*, font-*, leading-*, tracking-* para estilizar texto.

Texto pequeno

Texto base

Texto grande

Texto extra grande e negrito

7. Helpers Visuais

Classes como block, inline-block, hidden controlam exibição dos elementos.

block
inline-block

8. Outros Utilitários

Tailwind oferece utilitários diversos para controle avançado:

break-after-auto
break-after-page
break-after-column
select-none
cursor-pointer

9. Transições e Animações

Use transition, duration-*, ease-*, hover:, animate-* para efeitos visuais.