# Playground de valores arbitrarios de Tailwind Pega clases de Tailwind que usan valores arbitrarios (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) e inspecciona el CSS generado, con una vista previa visual en vivo, detección de pistas de tipo de dato y una explicación de cada traducción. Útil para depurar calc(), variables CSS y valores puntuales fuera de la escala de tokens. > Página canónica: https://elysiatools.com/es/tools/tailwind-arbitrary-value-playground - **Categoría:** Design - **Palabras clave:** tailwind, valor arbitrario, playground tailwind, w-\[..\], tailwind css, clase utilitaria, generador css, calc(), sintaxis de corchetes tailwind, frontend, diseño responsive, variable css, token de diseño ## Descripción general Un playground de valores arbitrarios de Tailwind para ingenieros frontend y autores de sistemas de diseño: 1. Pega una o más clases de Tailwind con sintaxis de corchetes (separadas por espacio o salto de línea). 2. El analizador reconoce tres formas: utilidad + valor arbitrario (w-[137px]), propiedad arbitraria ([mask-type:luminance]) y selectores de variante arbitrarios. 3. Las pistas de tipo como text-[length:14px] o text-[color:var(--brand)] se detectan y usan para desambiguar utilidades con prefijo sobrecargado (text -> color vs font-size, bg -> imagen vs color). 4. Por cada clase obtienes la regla CSS generada (expandida o comprimida), una vista previa visual en vivo y una breve explicación. 5. Las clases estáticas sin corchetes se listan, pero no se pueden expandir sin el motor completo de Tailwind — esta herramienta se centra en la salida de valores arbitrarios. Parser offline: no se ejecuta el runtime de Tailwind, por lo que las utilidades estáticas y los tokens de tema están fuera de alcance. ## Entradas - **Clases de Tailwind (una por línea o separadas por espacio)** (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 salida CSS** (select) - **Tema de vista previa** (select) - **Mostrar vista previa en vivo** (checkbox) - **Mostrar explicación CSS** (checkbox) ## Cuándo usarlo - Cuando necesitas verificar el CSS exacto generado por clases complejas de Tailwind que usan calc() o variables CSS. - Al depurar colisiones de tipos en utilidades sobrecargadas como text-\[color:...\] o text-\[length:...\] para asegurar la salida correcta. - Durante la creación de prototipos rápidos que requieren valores de diseño únicos no definidos en la configuración del tema de Tailwind. ## Cómo funciona - Introduce una o varias clases de Tailwind con sintaxis de corchetes en el área de texto, separadas por espacios o saltos de línea. - El analizador offline procesa la sintaxis identificando si es una utilidad con valor arbitrario, una propiedad directa o una variante. - El sistema aplica pistas de tipo de dato para resolver ambigüedades y genera la regla CSS correspondiente en formato expandido o comprimido. - Visualiza el resultado en tiempo real mediante una vista previa interactiva y lee la explicación detallada de la traducción CSS. ## Casos de uso - Depuración de layouts complejos basados en CSS Grid con anchos de columna arbitrarios. - Validación de degradados de fondo personalizados y máscaras de imagen antes de integrarlos en el código de producción. - Prueba de selectores y variantes CSS arbitrarias para interacciones de hover o estados específicos. ## Preguntas frecuentes ### ¿Esta herramienta ejecuta el framework completo de Tailwind CSS? No, utiliza un analizador offline especializado en la sintaxis de corchetes, por lo que no procesa clases estáticas ni tokens del tema personalizado. ### ¿Cómo se resuelven las ambigüedades como text-\[color\] o text-\[size\]? Detecta pistas de tipo explícitas como text-[length:14px] o text-[color:var(--brand)] para generar la propiedad CSS correcta. ### ¿Puedo usar funciones complejas como calc() o variables CSS? Sí, la herramienta procesa correctamente valores arbitrarios que contienen calc(), var() y degradados complejos. ### ¿Por qué se reemplazan los espacios por guiones bajos en las plantillas de grid? Tailwind utiliza guiones bajos en lugar de espacios dentro de los corchetes para evitar romper la separación de clases en el HTML. ### ¿Es posible ver el CSS en una sola línea? Sí, puedes cambiar la opción de estilo de salida CSS a 'Comprimido' para obtener la regla en una sola línea. ## Herramientas relacionadas - [Analizador de imagen VP8](https://elysiatools.com/es/tools/vp8-image-analyzer): Analiza imagenes WebP/VP8 con Sharp, genera un mapa gris de desplazamiento y renderiza un relieve 3D con Three.js - [Generador de Gráfico de Cascada](https://elysiatools.com/es/tools/waterfall-chart-generator): Crear gráficos de cascada para visualizar cambios acumulativos con distinción de valores positivos/negativos y visualización de subtotales - [Generador de informes de auditoria de accesibilidad](https://elysiatools.com/es/tools/accessibility-audit-report-generator): Audita HTML o una URL para detectar problemas comunes de WCAG y exporta un PDF estructurado - [Divisor CSV](https://elysiatools.com/es/tools/csv-splitter): Dividir contenido CSV por número de filas especificado. Perfecto para procesar grandes conjuntos de datos, dividir datos para análisis, procesamiento por lotes y gestionar límites de tamaño de archivo. Características: - Dividir CSV por número de filas - Soporte para múltiples formatos de salida - Preservar fila de encabezado en cada división - Opciones flexibles de formato de salida - Soporte para grandes conjuntos de datos - Procesamiento rápido y eficiente Casos de Uso Comunes: - Dividir archivos CSV grandes para procesamiento - Dividir datos para procesamiento paralelo - Crear bloques de datos manejables - Exportar datos en diferentes formatos - Preparar datos para operaciones por lotes - Gestionar limitaciones de tamaño de archivo - [Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/es/tools/font-file-inspector): Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables. - [Extractor de revision con tachado PDF](https://elysiatools.com/es/tools/pdf-strikethrough-review-extractor): Detecta texto tachado en PDFs de revision y genera un informe para contratos, politicas y borradores - [Generador de Gráfico Radar](https://elysiatools.com/es/tools/radar-chart-generator): Generar gráficos de radar personalizables desde datos, perfecto para comparación y análisis multidimensional - [Generador de Gráfico de Araña](https://elysiatools.com/es/tools/spider-chart-generator): Generar gráficos de araña simplificados (radar) para comparación y análisis de datos multidimensionales ## Ejemplos - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Muestras MP3 Sin Derechos de Autor](https://elysiatools.com/es/samples/mp3-samples): Colección de muestras de audio sin derechos de autor para pruebas y desarrollo, incluyendo sonidos de la naturaleza, música de meditación y audio ambiental - [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Herramientas de conversión de texto, codificación y normalización](https://elysiatools.com/es/hubs/text-convert): Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub. - [Herramientas de Text](https://elysiatools.com/es/hubs/text-utility): Explora 33 herramientas de text para flujos de utility y encuentra utilidades cercanas con rapidez. - [Herramientas de análisis de texto, legibilidad e inspección de contenido](https://elysiatools.com/es/hubs/text-analyze): Compara estadísticas de texto, detección de idioma, legibilidad, análisis de sentimiento, revisión de moderación y análisis de patrones en un solo hub. - [Herramientas de redacción, resaltado y formato de presentación de texto](https://elysiatools.com/es/hubs/text-format): Compara herramientas para enmascarar texto sensible, detectar PII, normalizar teléfonos, resaltar frases, centrar texto y formatear diffs en un solo hub.