Esta ferramenta executa o compilador oficial do Tailwind?

Não, ela utiliza um parser offline focado exclusivamente na sintaxe de valores arbitrários.

Posso testar classes estáticas comuns como 'flex' ou 'bg-red-500'?

Classes estáticas sem colchetes são listadas, mas não são expandidas por estarem fora do escopo do parser de valores arbitrários.

Como funciona a desambiguação de tipos?

A ferramenta detecta dicas como [length:...] ou [color:...] para diferenciar propriedades que compartilham o mesmo prefixo.

O que acontece com os sublinhados (_) nas classes de grid?

O parser converte automaticamente os sublinhados em espaços para gerar regras CSS válidas, como em grid-cols-[1fr_2fr].

Posso usar variáveis CSS personalizadas?

Sim, você pode passar variáveis CSS dentro dos colchetes, por exemplo, text-[var(--minha-cor)].

Playground de valores arbitrários do Tailwind | Ferramenta online grátis

Exemplos

1. Ajuste de Layout Responsivo com Grid e Calc

Desenvolvedor Frontend

Contexto

Um desenvolvedor precisa criar um layout de grid de três colunas com larguras específicas e uma altura de cabeçalho dinâmica baseada em calc().

Problema

Garantir que a sintaxe do Tailwind para grid-cols-[1fr_2fr_1fr] e h-[calc(100vh-4rem)] seja traduzida corretamente para CSS sem erros de digitação.

Como usar

Insira as classes grid-cols-[1fr_2fr_1fr] e h-[calc(100vh-4rem)] no campo de entrada de classes.

classes: "grid-cols-[1fr_2fr_1fr]\nh-[calc(100vh-4rem)]", outputFormat: "expanded"

Resultado

O parser exibe as regras CSS correspondentes com os sublinhados convertidos em espaços e a função calc() formatada corretamente.

2. Estilização com Variáveis CSS e Cores Arbitrárias

Designer de Sistemas de Design

Contexto

Uma equipe de design utiliza variáveis CSS para o tema da marca e precisa aplicar cores personalizadas diretamente via classes do Tailwind.

Problema

Verificar se a classe text-[color:var(--brand-primary)] e o fundo bg-[linear-gradient(90deg,#6366f1,#8b5cf6)] geram o CSS esperado.

classes: "text-[color:var(--brand-primary)]\nbg-[linear-gradient(90deg,#6366f1,#8b5cf6)]", outputFormat: "compressed"

Playground de valores arbitrários do Tailwind | Ferramenta online grátis | Elysia Tools

Playground de valores arbitrários do Tailwind

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Ajuste de Layout Responsivo com Grid e Calc

2. Estilização com Variáveis CSS e Cores Arbitrárias

Perguntas frequentes

Tailwind CSS Samples

Amostras de Áudio MP3 Livres de Direitos Autorais

Exemplos SVG

Exemplos de Processamento de Imagem Android Java

Analisador de imagem VP8

Gerador de Gráfico de Cascata

Gerador de relatorio de auditoria de acessibilidade

Divisor CSV

Ferramentas de conversão de caixa, codificação e normalização de texto

Ferramentas de Text

Ferramentas de análise de texto, legibilidade e inspeção de conteúdo

Ferramentas de redação, destaque e formatação de apresentação de texto