234.174 Perfumes no catálogo
1.913 Ofertas nas lojas
Meu perfil

Buscar ou perguntar

Sandbox · CDN Tailwind

Componentes Tailwind

Catálogo visual dos recursos da biblioteca: cores, tipografia, gradientes, sombras, rings, filtros, layout, formulários, motion e dark mode — utilidades puras, sem CSS custom de componente.

Ver índice Gradientes Motion
Paleta
22 cores
Escalas
50–950
Dark
class
Escopo
#tw-kit

Índice

Atalhos para cada família de utilidades demonstrada.

Cores Gradientes Tipografia Espaço · raio · borda Sombras · rings Filtros · glass Botões · badges Formulários Flex · Grid Dados · tabela Navegação Motion · estados

Fundação

Cores

Escala completa. Clique para copiar a classe bg-*.

slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Fundação

Gradientes

bg-gradient-to-*, from / via / to, texto e borda.

to-r · indigo → fuchsia
to-br · via
to-t · emerald → lime
to-l · sunset
to-tr · cosmic
to-bl · ocean

Texto com gradiente

bg-clip-text text-transparent

Borda em gradiente

Wrapper com p-[2px] + fundo sólido.

Fundação

Tipografia

text-xs · tracking-wide

text-sm — corpo compacto para UI densas.

text-base — leitura padrão de interface.

text-lg · font-medium

text-xl · semibold · tight

text-2xl · bold

text-3xl · extrabold

text-4xl · black · tighter

Leading / tracking

leading-loose + tracking-wide em parágrafo de apoio.

Truncate · line-clamp

Uma linha truncada com reticências quando o texto passa do container disponível.

Duas linhas com line-clamp-2. Este parágrafo é propositalmente longo para mostrar o corte após a segunda linha, mantendo o restante oculto.

font-mono · JetBrains Mono

italic · decorative

underline · decoration · offset

Fundação

Espaçamento, raio e bordas

1
2
3
4
5
6
8
10
12
border
border-2 dashed
border-4
divide-y · item 1
divide-y · item 2
divide-y · item 3

Superfície

Sombras e rings

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-glow
shadow-soft
ring-2 + offset
ring-inset badge

Efeitos

Filtros e glassmorphism

backdrop-blur-md

Glass sobre mesh colorido.

backdrop-blur-xl

Blur mais intenso + opacity.

blur-sm

brightness

contrast · saturate

grayscale

opacity · mix-blend

Ações

Botões e badges

Neutral Indigo Online Amber Gradient Dashed

Entrada

Formulários

Estrutura

Flex, Grid e aspect

A B C +5

flex · -space-x · ring stack

1
2
col-span-2
responsive span
3
4

aspect-square · aspect-video · aspect-[4/3]

Containers

Cards e hover

Card com mídia

hover:-translate-y · shadow-xl · scale na imagem.

Stat

98.4%

+2.1%

Skeleton · animate-shimmer

Dados

Tabela, progresso e alertas

Perfume Família Nota
Bleu de Chanel Amadeirado 4.6
Light Blue Cítrico 4.2
Black Opium Oriental 4.8
Progresso72%
Sucesso — operação concluída.
Aviso — revise os campos destacados.
Erro — não foi possível salvar.
Info — dark mode usa variantes dark:.

Navegação

Tabs, filtros, acordeão e paginação

Painel A — conteúdo da aba ativa com utilitários de estado.
O que é o Play CDN?
Ideal para demos. Em produção, prefira build com PostCSS/Vite para purge e performance.
Como evitar conflito com Bootstrap?
Esta página usa important: '#tw-kit' e preflight: false.

Motion

Animações, transforms e estados

spin
ping
pulse
bounce
animate-float
opacity-100
opacity-60
opacity-30

Responsivo

Prefixo sm: / md: / lg: — redimensione a janela. Ex.: o hero usa text-4xl sm:text-5xl.

base · 1 col
sm · 2 cols
lg · 4 cols
breakpoints

Tailwind via CDN · escopo #tw-kit · Componentes marca · Flux UI Kit

Ação concluída