¿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.

Elysia Tools

Navegación

Design

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.

Detalles

Qué te ayuda a hacer esta herramienta

Un playground de valores arbitrarios de Tailwind para ingenieros frontend y autores de sistemas de diseño:

Pega una o más clases de Tailwind con sintaxis de corchetes (separadas por espacio o salto de línea).
El analizador reconoce tres formas: utilidad + valor arbitrario (w-[137px]), propiedad arbitraria ([mask-type:luminance]) y selectores de variante arbitrarios.
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).
Por cada clase obtienes la regla CSS generada (expandida o comprimida), una vista previa visual en vivo y una breve explicación.
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.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

Tamaño, calc y fondo degradado

Varias utilidades de valor arbitrario que prueban cálculo de longitud, un color CSS variable y un fondo degradado.

<div class="tav-wrap">…5 classes parsed, each with a live swatch/tile preview and an expanded CSS rule such as .demo { width: 137px; }…</div>

Propiedad arbitraria y plantilla de grid

Demuestra el atajo [propiedad:valor] y una plantilla de grid multibanda usando el guion bajo como espacio.

<div class="tav-wrap">…arbitrary properties mask-type and scroll-snap-type are emitted directly, grid templates collapse underscores into spaces, output is single-line…</div>

Entradas

Completa los campos necesarios y ejecuta la herramienta.

5 opciones

ContenidoPega o escribe los valores principales.1

Clases de Tailwind (una por línea o separadas por espacio)textareaObligatorio

AjustesAjusta formatos, rangos, números y modos.2

Estilo de salida CSSselectOpcionalTema de vista previaselectOpcional

InterruptoresActiva o desactiva comportamientos opcionales.2

Mostrar vista previa en vivocheckboxOpcionalActivado si está marcadoMostrar explicación CSScheckboxOpcionalActivado si está marcado

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Playground de valores arbitrarios de Tailwind

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Depuración de dimensiones dinámicas y degradados

2. Configuración de Grid y propiedades arbitrarias

Preguntas frecuentes

Ejemplos de Tailwind CSS

Muestras MP3 Sin Derechos de Autor

Ejemplos SVG

Ejemplos de Procesamiento de Imágenes Android Java

Analizador de imagen VP8

Generador de Gráfico de Cascada

Generador de informes de auditoria de accesibilidad

Divisor CSV

Herramientas de conversión de texto, codificación y normalización

Herramientas de Text

Herramientas de análisis de texto, legibilidad e inspección de contenido

Herramientas de redacción, resaltado y formato de presentación de texto