PureTools

Cheatsheet Tailwind CSS

Referencia rapida de classes Tailwind CSS com equivalente CSS.

padding: 1rem (16px)
padding-left/right: 1rem
padding-top/bottom: 0.5rem
margin: auto
margin-left/right: auto (center)
margin-top: 1rem
gap between horizontal children: 1rem
gap between vertical children: 0.5rem
gap: 1rem (flex/grid)
font-size: 0.875rem
font-size: 1.125rem
font-size: 1.5rem
font-weight: 700
font-weight: 500
text-align: center
letter-spacing: -0.025em
line-height: 1.625
overflow: hidden + text-overflow: ellipsis + white-space: nowrap
display: flex
flex-direction: column
align-items: center
justify-content: space-between
justify-content: center
flex-wrap: wrap
flex: 1 1 0%
flex-shrink: 0
display: grid
grid-template-columns: repeat(3, 1fr)
grid-column: span 2
2 columns at sm breakpoint (640px)
3 columns at md breakpoint (768px)
border-radius: 0.375rem
border-radius: 9999px
border-width: 1px
border-width: 2px
border-bottom-width: 1px
background: primary color
color: muted foreground
background: #ef4444
color: #fff
background opacity: 0.5
small box-shadow
large box-shadow
opacity: 0.5
transition on color properties
background on hover
CSS spin animation
width: 100%
height: 100vh
max-width: 24rem (384px)
max-width: 80rem (1280px)
min-height: 100vh
width + height: 2.5rem

O que é?

Cheatsheet Tailwind CSS é uma ferramenta online gratuita que roda inteiramente no seu navegador. Referencia rapida de classes Tailwind CSS com equivalente CSS. Nenhum dado é enviado para servidores — todo o processamento acontece localmente no seu dispositivo, garantindo total privacidade e segurança. Seja você um desenvolvedor, designer, estudante ou profissional, esta ferramenta economiza tempo ao fornecer resultados instantâneos sem necessidade de instalar software ou criar conta.

Como usar

Usar o Cheatsheet Tailwind CSS é simples e direto. Basta inserir ou colar seus dados no campo de entrada, configurar as opções disponíveis e clicar no botão de ação para processar. O resultado aparece instantaneamente na área de saída. Você pode copiar o resultado para a área de transferência com um clique. Se precisar recomeçar, basta limpar a entrada e tentar novamente. A ferramenta aceita uma ampla variedade de entradas e lida com casos especiais de forma adequada.

Quando usar

Cheatsheet Tailwind CSS é útil em muitos cenários do dia a dia. Desenvolvedores usam durante sessões de codificação para processar dados rapidamente sem sair do navegador. Também é perfeito para tarefas pontuais onde instalar um aplicativo dedicado seria exagero. Estudantes e aprendizes acham útil para entender como o processo subjacente funciona. Como é baseado na web, você pode usar de qualquer dispositivo — desktop, laptop, tablet ou celular — sem nenhuma configuração.

Perguntas Frequentes

O Cheatsheet Tailwind CSS é gratuito?▾
Sim, o Cheatsheet Tailwind CSS é completamente gratuito, sem limites de uso, sem necessidade de conta e sem anúncios que bloqueiem funcionalidades. Todos os recursos estão disponíveis imediatamente.
Meus dados estão seguros ao usar o Cheatsheet Tailwind CSS?▾
Com certeza. Todo o processamento acontece diretamente no seu navegador usando JavaScript. Seus dados nunca saem do seu dispositivo e nunca são enviados para nenhum servidor externo. Você pode verificar isso na aba de rede do seu navegador.
O Cheatsheet Tailwind CSS funciona em dispositivos móveis?▾
Sim, a ferramenta é totalmente responsiva e funciona em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, em qualquer dispositivo — desktop, tablet ou smartphone.
Preciso instalar algo para usar o Cheatsheet Tailwind CSS?▾
Nenhuma instalação é necessária. O Cheatsheet Tailwind CSS roda inteiramente no seu navegador. Basta abrir a página e começar a usar imediatamente. Não há cadastro, download ou extensão de navegador necessários.

Ferramentas Relacionadas

Formatador CSS

Formate e minifique CSS online gratuitamente. Embeleze seu código CSS com indentação automática.

Referencia de Seletores CSS

Referencia completa de seletores CSS com exemplos.