Como crio designs responsivos no Tailwind?

Tailwind fornece prefixos responsivos mobile-first. Use sm:(640px), md:(768px), lg:(1024px), xl:(1280px), 2xl:(1536px) antes das classes. Exemplo: "text-sm md:text-base lg:text-lg" altera o tamanho do texto com base na largura da tela.

Como adiciono cores personalizadas?

Adicione cores personalizadas em tailwind.config.js em theme.extend.colors. Exemplo: colors: { brand: { 50: "#fff", 500: "#000" } }. Depois use como bg-brand-500, text-brand-50. Ou use valores arbitrários como bg-[#1da1f2] para cores únicas.

Devo usar Tailwind ou CSS normal?

Tailwind se destaca em prototipagem rápida, sistemas de design consistentes e layouts responsivos. CSS normal é melhor para animações complexas, estilos especializados e manutenção de bases de código existentes. Muitos projetos usam ambos juntos.

Como implemento o modo escuro no Tailwind?

Use o prefixo dark:. Exemplo: "bg-white dark:bg-gray-900". Em tailwind.config.js, defina darkMode como "class" ou "media". "class" permite alternância manual, "media" segue as preferências do sistema.

>_/cheatsheet/tailwind

TailwindCSS Cheatsheet

Classes utilitárias TailwindCSS frequentemente usadas

Pontos de quebra responsivos Estados (Variantes)Espaçamento Tamanho Exibição Flexbox Alinhamento Grade Posição Tipografia Alinhamento e decoração de texto Cores Bordas Efeitos Transições e animação Transformações Overflow e outros Paleta de cores

#Pontos de quebra responsivos

Classe	CSS	Descrição
`sm:`	`@media (min-width: 640px)`	Telas pequenas e maiores
`md:`	`@media (min-width: 768px)`	Telas médias e maiores
`lg:`	`@media (min-width: 1024px)`	Telas grandes e maiores
`xl:`	`@media (min-width: 1280px)`	Telas extra grandes e maiores
`2xl:`	`@media (min-width: 1536px)`	Telas 2x extra grandes e maiores

#Estados (Variantes)

Classe	CSS	Descrição
`hover:`	`:hover`	Ao passar o mouse
`focus:`	`:focus`	Ao focar
`active:`	`:active`	Ao clicar
`disabled:`	`:disabled`	Quando desabilitado
`first:`	`:first-child`	Primeiro filho
`last:`	`:last-child`	Último filho
`odd:`	`:nth-child(odd)`	Filhos ímpares
`even:`	`:nth-child(even)`	Filhos pares
`group-hover:`	`.group:hover &`	Ao passar sobre o grupo pai
`dark:`	`@media (prefers-color-scheme: dark)`	Modo escuro

#Espaçamento

Classe	CSS	Descrição
`p-{size}`	`padding`	Preenchimento em todos os lados
`px-{size}`	`padding-left/right`	Preenchimento horizontal
`py-{size}`	`padding-top/bottom`	Preenchimento vertical
`pt/pr/pb/pl-{size}`	`padding-top/right/bottom/left`	Preenchimento de um lado
`m-{size}`	`margin`	Margem em todos os lados
`mx-{size}`	`margin-left/right`	Margem horizontal
`my-{size}`	`margin-top/bottom`	Margem vertical
`mt/mr/mb/ml-{size}`	`margin-top/right/bottom/left`	Margem de um lado
`mx-auto`	`margin: 0 auto`	Centralizar horizontalmente
`gap-{size}`	`gap`	Espaço Flex/Grid
`gap-x-{size}`	`column-gap`	Espaço horizontal
`gap-y-{size}`	`row-gap`	Espaço vertical
`space-x-{size}`	`> * + * { margin-left }`	Espaço horizontal entre filhos
`space-y-{size}`	`> * + * { margin-top }`	Espaço vertical entre filhos

#Tamanho

Classe	CSS	Descrição
`w-{size}`	`width`	Largura
`w-full`	`width: 100%`	Largura total
`w-screen`	`width: 100vw`	Largura da tela
`w-auto`	`width: auto`	Largura automática
`w-fit`	`width: fit-content`	Ajustar ao conteúdo
`min-w-0`	`min-width: 0`	Largura mínima 0
`min-w-full`	`min-width: 100%`	Largura mínima 100%
`max-w-{size}`	`max-width`	Largura máxima
`max-w-screen-{bp}`	`max-width: breakpoint`	Largura máxima do ponto de quebra
`h-{size}`	`height`	Altura
`h-full`	`height: 100%`	Altura total
`h-screen`	`height: 100vh`	Altura da tela
`min-h-screen`	`min-height: 100vh`	Altura mínima da tela
`max-h-{size}`	`max-height`	Altura máxima
`size-{size}`	`width + height`	Largura e altura juntos

#Exibição

Classe	CSS	Descrição
`block`	`display: block`	Elemento de bloco
`inline-block`	`display: inline-block`	Bloco em linha
`inline`	`display: inline`	Elemento em linha
`flex`	`display: flex`	Contêiner flex
`inline-flex`	`display: inline-flex`	Flex em linha
`grid`	`display: grid`	Contêiner grid
`inline-grid`	`display: inline-grid`	Grid em linha
`hidden`	`display: none`	Oculto
`contents`	`display: contents`	Apenas conteúdo

#Flexbox

Classe	CSS	Descrição
`flex-row`	`flex-direction: row`	Direção horizontal
`flex-col`	`flex-direction: column`	Direção vertical
`flex-row-reverse`	`flex-direction: row-reverse`	Horizontal inverso
`flex-col-reverse`	`flex-direction: column-reverse`	Vertical inverso
`flex-wrap`	`flex-wrap: wrap`	Permitir quebra
`flex-nowrap`	`flex-wrap: nowrap`	Sem quebra
`flex-1`	`flex: 1 1 0%`	Preencher espaço restante
`flex-auto`	`flex: 1 1 auto`	Tamanho automático
`flex-none`	`flex: none`	Tamanho fixo
`grow`	`flex-grow: 1`	Permitir crescer
`grow-0`	`flex-grow: 0`	Prevenir crescimento
`shrink`	`flex-shrink: 1`	Permitir encolher
`shrink-0`	`flex-shrink: 0`	Prevenir encolhimento

#Alinhamento

Classe	CSS	Descrição
`justify-start`	`justify-content: flex-start`	Início do eixo principal
`justify-center`	`justify-content: center`	Centro do eixo principal
`justify-end`	`justify-content: flex-end`	Fim do eixo principal
`justify-between`	`justify-content: space-between`	Espaço entre
`justify-around`	`justify-content: space-around`	Espaço ao redor
`justify-evenly`	`justify-content: space-evenly`	Espaço uniforme
`items-start`	`align-items: flex-start`	Início do eixo transversal
`items-center`	`align-items: center`	Centro do eixo transversal
`items-end`	`align-items: flex-end`	Fim do eixo transversal
`items-baseline`	`align-items: baseline`	Linha de base do eixo transversal
`items-stretch`	`align-items: stretch`	Esticar para preencher
`self-auto`	`align-self: auto`	Auto individual
`self-start`	`align-self: flex-start`	Início individual
`self-center`	`align-self: center`	Centro individual
`self-end`	`align-self: flex-end`	Fim individual

#Grade

Classe	CSS	Descrição
`grid-cols-{n}`	`grid-template-columns: repeat(n, 1fr)`	n colunas
`grid-rows-{n}`	`grid-template-rows: repeat(n, 1fr)`	n linhas
`col-span-{n}`	`grid-column: span n`	Ocupar n colunas
`col-start-{n}`	`grid-column-start: n`	Começar na coluna n
`col-end-{n}`	`grid-column-end: n`	Terminar na coluna n
`row-span-{n}`	`grid-row: span n`	Ocupar n linhas
`row-start-{n}`	`grid-row-start: n`	Começar na linha n
`row-end-{n}`	`grid-row-end: n`	Terminar na linha n
`auto-cols-auto`	`grid-auto-columns: auto`	Tamanho de coluna automático
`auto-cols-fr`	`grid-auto-columns: 1fr`	Coluna automática 1fr
`auto-rows-auto`	`grid-auto-rows: auto`	Tamanho de linha automático

#Posição

Classe	CSS	Descrição
`static`	`position: static`	Posição estática
`relative`	`position: relative`	Posição relativa
`absolute`	`position: absolute`	Posição absoluta
`fixed`	`position: fixed`	Posição fixa
`sticky`	`position: sticky`	Posição fixa rolável
`top-{size}`	`top`	Deslocamento superior
`right-{size}`	`right`	Deslocamento direito
`bottom-{size}`	`bottom`	Deslocamento inferior
`left-{size}`	`left`	Deslocamento esquerdo
`inset-{size}`	`top/right/bottom/left`	Deslocamento em todas as direções
`inset-x-{size}`	`left/right`	Deslocamento horizontal
`inset-y-{size}`	`top/bottom`	Deslocamento vertical
`z-{n}`	`z-index`	Índice Z
`z-auto`	`z-index: auto`	Índice Z automático

#Tipografia

Classe	CSS	Descrição
`font-sans`	`font-family: sans-serif`	Fonte sans-serif
`font-serif`	`font-family: serif`	Fonte serif
`font-mono`	`font-family: monospace`	Fonte monoespaçada
`text-xs`	`font-size: 0.75rem`	Texto extra pequeno
`text-sm`	`font-size: 0.875rem`	Texto pequeno
`text-base`	`font-size: 1rem`	Texto base
`text-lg`	`font-size: 1.125rem`	Texto grande
`text-xl`	`font-size: 1.25rem`	Texto extra grande
`text-2xl ~ 9xl`	`font-size: 1.5rem ~ 8rem`	Tamanhos de texto maiores
`font-thin`	`font-weight: 100`	Peso fino
`font-light`	`font-weight: 300`	Peso leve
`font-normal`	`font-weight: 400`	Peso normal
`font-medium`	`font-weight: 500`	Peso médio
`font-semibold`	`font-weight: 600`	Semi negrito
`font-bold`	`font-weight: 700`	Negrito
`italic`	`font-style: italic`	Itálico
`not-italic`	`font-style: normal`	Não itálico
`leading-{size}`	`line-height`	Altura da linha
`tracking-{size}`	`letter-spacing`	Espaçamento entre letras

#Alinhamento e decoração de texto

Classe	CSS	Descrição
`text-left`	`text-align: left`	Alinhar à esquerda
`text-center`	`text-align: center`	Alinhar ao centro
`text-right`	`text-align: right`	Alinhar à direita
`text-justify`	`text-align: justify`	Justificar
`underline`	`text-decoration: underline`	Sublinhado
`line-through`	`text-decoration: line-through`	Riscado
`no-underline`	`text-decoration: none`	Sem decoração
`uppercase`	`text-transform: uppercase`	Maiúsculas
`lowercase`	`text-transform: lowercase`	Minúsculas
`capitalize`	`text-transform: capitalize`	Capitalizar
`truncate`	`overflow: hidden; text-overflow: ellipsis`	Truncar com reticências
`line-clamp-{n}`	`-webkit-line-clamp: n`	Limitar a n linhas
`whitespace-nowrap`	`white-space: nowrap`	Sem quebra de linha
`break-words`	`word-wrap: break-word`	Quebrar palavras

#Cores

Classe	CSS	Descrição
`text-{color}-{shade}`	`color`	Cor do texto
`bg-{color}-{shade}`	`background-color`	Cor de fundo
`bg-gradient-to-{dir}`	`background-image: linear-gradient`	Direção do gradiente
`from-{color}`	`from color`	Cor inicial do gradiente
`via-{color}`	`via color`	Cor intermediária do gradiente
`to-{color}`	`to color`	Cor final do gradiente
`text-transparent`	`color: transparent`	Texto transparente
`bg-transparent`	`background-color: transparent`	Fundo transparente
`text-current`	`color: currentColor`	Herdar cor atual

#Bordas

Classe	CSS	Descrição
`border`	`border-width: 1px`	Borda de 1px
`border-{n}`	`border-width: npx`	Borda de n pixels
`border-t/r/b/l-{n}`	`border-top/right/bottom/left-width`	Borda direcional
`border-{color}`	`border-color`	Cor da borda
`border-solid`	`border-style: solid`	Borda sólida
`border-dashed`	`border-style: dashed`	Borda tracejada
`border-dotted`	`border-style: dotted`	Borda pontilhada
`border-none`	`border-style: none`	Sem borda
`rounded`	`border-radius: 0.25rem`	Levemente arredondado
`rounded-md`	`border-radius: 0.375rem`	Arredondamento médio
`rounded-lg`	`border-radius: 0.5rem`	Arredondamento grande
`rounded-xl`	`border-radius: 0.75rem`	Arredondamento extra grande
`rounded-full`	`border-radius: 9999px`	Círculo completo
`rounded-none`	`border-radius: 0`	Sem arredondamento
`rounded-t/r/b/l-{size}`	`border-radius (corners)`	Cantos específicos

#Efeitos

Classe	CSS	Descrição
`shadow-sm`	`box-shadow: small`	Sombra pequena
`shadow`	`box-shadow: default`	Sombra padrão
`shadow-md`	`box-shadow: medium`	Sombra média
`shadow-lg`	`box-shadow: large`	Sombra grande
`shadow-xl`	`box-shadow: extra large`	Sombra extra grande
`shadow-2xl`	`box-shadow: 2x large`	Sombra 2x grande
`shadow-inner`	`box-shadow: inset`	Sombra interna
`shadow-none`	`box-shadow: none`	Sem sombra
`opacity-{n}`	`opacity: n%`	Opacidade (0-100)
`blur`	`filter: blur(8px)`	Desfoque
`blur-{size}`	`filter: blur(size)`	Quantidade de desfoque
`brightness-{n}`	`filter: brightness(n%)`	Brilho
`contrast-{n}`	`filter: contrast(n%)`	Contraste
`grayscale`	`filter: grayscale(100%)`	Escala de cinza
`invert`	`filter: invert(100%)`	Inverter

#Transições e animação

Classe	CSS	Descrição
`transition`	`transition-property: all`	Transição padrão
`transition-all`	`transition-property: all`	Transição de tudo
`transition-colors`	`transition-property: colors`	Transição de cor
`transition-opacity`	`transition-property: opacity`	Transição de opacidade
`transition-transform`	`transition-property: transform`	Transição de transformação
`duration-{ms}`	`transition-duration: ms`	Duração
`ease-linear`	`transition-timing: linear`	Suavização linear
`ease-in`	`transition-timing: ease-in`	Suavização de entrada
`ease-out`	`transition-timing: ease-out`	Suavização de saída
`ease-in-out`	`transition-timing: ease-in-out`	Suavização de entrada e saída
`delay-{ms}`	`transition-delay: ms`	Atraso
`animate-spin`	`animation: spin`	Animação de rotação
`animate-ping`	`animation: ping`	Animação de ping
`animate-pulse`	`animation: pulse`	Animação de pulso
`animate-bounce`	`animation: bounce`	Animação de salto

#Transformações

Classe	CSS	Descrição
`scale-{n}`	`transform: scale(n)`	Escala
`scale-x-{n}`	`transform: scaleX(n)`	Escala X
`scale-y-{n}`	`transform: scaleY(n)`	Escala Y
`rotate-{deg}`	`transform: rotate(deg)`	Girar
`translate-x-{size}`	`transform: translateX`	Transladar X
`translate-y-{size}`	`transform: translateY`	Transladar Y
`skew-x-{deg}`	`transform: skewX(deg)`	Inclinar X
`skew-y-{deg}`	`transform: skewY(deg)`	Inclinar Y
`origin-center`	`transform-origin: center`	Origem no centro
`origin-top`	`transform-origin: top`	Origem no topo
`origin-bottom`	`transform-origin: bottom`	Origem embaixo

#Overflow e outros

Classe	CSS	Descrição
`overflow-auto`	`overflow: auto`	Rolar se necessário
`overflow-hidden`	`overflow: hidden`	Ocultar overflow
`overflow-scroll`	`overflow: scroll`	Sempre rolar
`overflow-visible`	`overflow: visible`	Mostrar overflow
`overflow-x-{value}`	`overflow-x`	Overflow horizontal
`overflow-y-{value}`	`overflow-y`	Overflow vertical
`cursor-pointer`	`cursor: pointer`	Cursor de ponteiro
`cursor-not-allowed`	`cursor: not-allowed`	Cursor não permitido
`pointer-events-none`	`pointer-events: none`	Desativar eventos de ponteiro
`select-none`	`user-select: none`	Prevenir seleção
`select-text`	`user-select: text`	Permitir seleção de texto
`select-all`	`user-select: all`	Selecionar tudo ao clicar
`sr-only`	`screen reader only`	Apenas leitor de tela

#Paleta de cores

slate

gray

zinc

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

💡 Click a color block to copy the class name (e.g., blue-500)

Usage: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}

#Referência de escala de tamanho

Classe	Valor	Classe	Valor
0	0px	px	1px
0.5	0.125rem (2px)	1	0.25rem (4px)
2	0.5rem (8px)	3	0.75rem (12px)
4	1rem (16px)	5	1.25rem (20px)
6	1.5rem (24px)	8	2rem (32px)
10	2.5rem (40px)	12	3rem (48px)
16	4rem (64px)	20	5rem (80px)
24	6rem (96px)	32	8rem (128px)

#Perguntas frequentes (FAQ)

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.