# Playground de valores arbitrários do Tailwind Cole classes do Tailwind que usam valores arbitrários (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) e inspecione o CSS gerado, com pré-visualização visual ao vivo, detecção de dicas de tipo de dado e uma explicação de cada tradução. Útil para depurar calc(), variáveis CSS e valores avulsos fora da escala de tokens. > Página canônica: https://elysiatools.com/pt/tools/tailwind-arbitrary-value-playground - **Categoria:** Design - **Palavras-chave:** tailwind, valor arbitrário, playground tailwind, w-\[..\], tailwind css, classe utilitária, gerador css, calc(), sintaxe de colchetes tailwind, frontend, design responsivo, variável css, token de design ## Visão geral Um playground de valores arbitrários do Tailwind para engenheiros frontend e autores de design systems: 1. Cole uma ou mais classes do Tailwind com sintaxe de colchetes (separadas por espaço ou nova linha). 2. O parser reconhece três formas: utility + valor arbitrário (w-[137px]), propriedade arbitrária ([mask-type:luminance]) e seletores de variante arbitrários. 3. Dicas de tipo como text-[length:14px] ou text-[color:var(--brand)] são detectadas e usadas para desambiguar utilities com prefixo sobrecarregado (text -> cor vs font-size, bg -> imagem vs cor). 4. Para cada classe você recebe a regra CSS gerada (expandida ou comprimida), uma pré-visualização visual ao vivo e uma breve explicação. 5. Classes estáticas sem colchetes são listadas, mas não podem ser expandidas sem o engine completo do Tailwind — a ferramenta foca na saída de valores arbitrários. Parser offline: nenhum runtime do Tailwind é executado, então utilities estáticos e tokens de tema estão fora do escopo. ## Entradas - **Classes Tailwind (uma por linha ou separadas por espaço)** (textarea): w-\[137px\] h-\[calc(100vh-4rem)\] text-\[#bada55\] bg-\[url(/hero.png)\] grid-cols-\[1fr_2fr_1fr\] \[mask-type:luminance\] \[&:hover\]:text-\[#ff0000\] - **Estilo de saída CSS** (select) - **Tema de pré-visualização** (select) - **Mostrar pré-visualização ao vivo** (checkbox) - **Mostrar explicação CSS** (checkbox) ## Quando usar - Ao depurar cálculos complexos com calc() ou variáveis CSS dentro de colchetes do Tailwind. - Quando precisar desambiguar propriedades sobrecarregadas usando dicas de tipo como text-\[length:14px\] ou text-\[color:var(--brand)\]. - Para validar a sintaxe de propriedades arbitrárias e seletores de variantes customizados antes de aplicá-los no código de produção. ## Como funciona - Insira uma ou mais classes do Tailwind que utilizam a sintaxe de colchetes no campo de texto. - Escolha o estilo de saída do CSS (expandido ou comprimido) e o tema de pré-visualização (claro ou escuro). - O parser offline processa as classes, identificando utilities, propriedades arbitrárias e variantes. - Visualize o CSS gerado, acompanhado de uma explicação detalhada e uma pré-visualização visual interativa. ## Casos de uso - Validação rápida de layouts de grid complexos usando grid-cols-\[1fr_2fr_1fr\]. - Depuração de espaçamentos dinâmicos com calc() como h-\[calc(100vh-4rem)\]. - Criação de estilos pontuais com propriedades CSS arbitrárias como \[mask-type:luminance\]. ## Perguntas frequentes ### 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)]. ## Ferramentas relacionadas - [Analisador de imagem VP8](https://elysiatools.com/pt/tools/vp8-image-analyzer): Analisa imagens WebP/VP8 com Sharp, gera um displacement map em escala de cinza e renderiza relevo 3D com Three.js - [Gerador de Gráfico de Cascata](https://elysiatools.com/pt/tools/waterfall-chart-generator): Criar gráficos de cascata para visualizar mudanças cumulativas com distinção de valores positivos/negativos e exibição de subtotais - [Gerador de relatorio de auditoria de acessibilidade](https://elysiatools.com/pt/tools/accessibility-audit-report-generator): Audita HTML ou URL em busca de problemas comuns de WCAG e exporta um PDF estruturado - [Divisor CSV](https://elysiatools.com/pt/tools/csv-splitter): Dividir conteúdo CSV por número de linhas especificado. Perfeito para processar grandes conjuntos de dados, dividir dados para análise, processamento em lote e gerenciar limites de tamanho de arquivo. Recursos: - Dividir CSV por número de linhas - Suporte para múltiplos formatos de saída - Preservar linha de cabeçalho em cada divisão - Opções flexíveis de formato de saída - Suporte para grandes conjuntos de dados - Processamento rápido e eficiente Casos de Uso Comuns: - Dividir arquivos CSV grandes para processamento - Dividir dados para processamento paralelo - Criar blocos de dados gerenciáveis - Exportar dados em diferentes formatos - Preparar dados para operações em lote - Gerenciar limitações de tamanho de arquivo - [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis. - [Extrator de revisao com tachado em PDF](https://elysiatools.com/pt/tools/pdf-strikethrough-review-extractor): Detecta texto riscado em PDFs revisados e gera um relatorio para contratos e revisoes - [Gerador de Gráfico Radar](https://elysiatools.com/pt/tools/radar-chart-generator): Gerar gráficos de radar personalizáveis a partir de dados, perfeito para comparação e análise multidimensional - [Gerador de Gráfico de Aranha](https://elysiatools.com/pt/tools/spider-chart-generator): Gerar gráficos de aranha simplificados (radar) para comparação e análise de dados multidimensionais ## Exemplos - [Tailwind CSS Samples](https://elysiatools.com/pt/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Amostras de Áudio MP3 Livres de Direitos Autorais](https://elysiatools.com/pt/samples/mp3-samples): Coleção de amostras de áudio livres de direitos autorais para testes e desenvolvimento, incluindo sons da natureza, música de meditação e áudio ambiente - [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato ## Conteúdo relacionado - [Ferramentas de conversão de caixa, codificação e normalização de texto](https://elysiatools.com/pt/hubs/text-convert): Compare conversão de caixa de texto, conversão de largura de caracteres, conversão de codificação, tratamento de quoted-printable e normalização de texto em um único hub. - [Ferramentas de Text](https://elysiatools.com/pt/hubs/text-utility): Explore 33 ferramentas de text para fluxos de utility e encontre utilitários próximos com rapidez. - [Ferramentas de análise de texto, legibilidade e inspeção de conteúdo](https://elysiatools.com/pt/hubs/text-analyze): Compare estatísticas de texto, detecção de idioma, legibilidade, análise de sentimento, revisão de moderação e análise de padrões em um único hub. - [Ferramentas de redação, destaque e formatação de apresentação de texto](https://elysiatools.com/pt/hubs/text-format): Compare ferramentas para mascarar texto sensível, detectar PII, normalizar telefones, destacar frases, centralizar texto e formatar diffs em um único hub.