Como usar: Gerador de Valores Arbitrários Tailwind
- Cole uma ou mais declarações CSS (um bloco de regra completo também funciona).
- Opcionalmente, adicione uma variante como
md:ouhover:. - Copie todas as classes de uma vez ou classes individuais da tabela.
O que são valores arbitrários do Tailwind?
Quando um design precisa de um valor que não está no seu tema do Tailwind, você pode escrevê-lo direto no código entre colchetes: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Para propriedades CSS que o Tailwind não tem nenhum utilitário, use uma propriedade arbitrária: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
As regras de sintaxe que esta ferramenta trata
- Sem espaços: nomes de classe não podem ter espaços, então os espaços viram underscores —
1fr 200px auto→1fr_200px_auto. Espaços depois de vírgulas são simplesmente removidos. - Dicas de tipo: alguns utilitários são ambíguos com variáveis CSS (
text-[var(--x)]é cor ou tamanho?). A ferramenta adiciona dicas comotext-[color:var(--brand)]outext-[length:var(--size)]. - !important: vira o prefixo
!. - Propriedades não suportadas, como
mask-imageouclip-path, são geradas como propriedades arbitrárias.
Quando não usar valores arbitrários
Valores arbitrários são perfeitos para casos pontuais. Se o mesmo valor aparecer em vários lugares, adicione-o ao seu tema — para cores, use as ferramentas Variáveis CSS para Tailwind ou Gerador de Cores Tailwind — assim ele fica consistente e legível.
Também pesquisado como: valores arbitrários tailwind, colchetes tailwind, css para tailwind, grid-cols-[], propriedades arbitrárias, valores personalizados tailwind.
Ferramentas que combinam com: Gerador de Valores Arbitrários Tailwind
- Gerador de Glassmorphism — Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como escrevo espaços em valores arbitrários do Tailwind?
Use underscores:
grid-cols-[1fr_auto]. O Tailwind os converte de volta em espaços. Para usar um underscore de verdade, escape-o como \_.O que é uma propriedade arbitrária?
Uma classe no formato
[propriedade:valor] para propriedades CSS sem utilitário no Tailwind, por exemplo [mask-type:luminance].Isso funciona com Tailwind v3 e v4?
Sim, a sintaxe de colchetes é a mesma nas duas versões. O Tailwind v4 também aceita a forma abreviada
(--var) para variáveis CSS.Por que aparece “color:” dentro da minha classe?
É uma dica de tipo. Ela informa ao Tailwind que um valor
var() é uma cor, então ele gera color em vez de font-size.Posso instalar o Gerador de Valores Arbitrários Tailwind como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Valores Arbitrários Tailwind é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.