Cómo usar: Generador de valores arbitrarios Tailwind
- Pega una o varias declaraciones CSS (también funciona un bloque de reglas completo).
- Opcionalmente, añade una variante como
md:ohover:. - Copia todas las clases de una vez o las individuales desde la tabla.
¿Qué son los valores arbitrarios de Tailwind?
Cuando un diseño necesita un valor que no está en tu tema de Tailwind, puedes escribirlo directamente entre corchetes: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Para propiedades CSS para las que Tailwind no tiene ninguna utilidad, usa una propiedad arbitraria: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Las reglas de sintaxis que gestiona esta herramienta
- Sin espacios: los nombres de clase no pueden contener espacios, así que los espacios se convierten en guiones bajos:
1fr 200px auto→1fr_200px_auto. Los espacios después de las comas se eliminan sin más. - Indicadores de tipo: algunas utilidades son ambiguas con las variables CSS (¿es
text-[var(--x)]un color o un tamaño?). La herramienta añade indicadores comotext-[color:var(--brand)]otext-[length:var(--size)]. - !important: se convierte en el prefijo
!. - Propiedades no soportadas, como
mask-imageoclip-path, se generan como propiedades arbitrarias.
Cuándo no usar valores arbitrarios
Los valores arbitrarios son ideales para casos puntuales. Si el mismo valor aparece en varios lugares, añádelo a tu tema en su lugar; para los colores, usa las herramientas CSS Variables to Tailwind o Tailwind Color Generator, así se mantiene coherente y legible.
También se busca como: valores arbitrarios tailwind, corchetes tailwind, css a tailwind, grid-cols-[], propiedades arbitrarias tailwind, valores personalizados tailwind, convertir css a tailwind, tailwind arbitrary values.
Herramientas que combinan con: Generador de valores arbitrarios Tailwind
- Generador de Glassmorphism — Diseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los navegadores: con el prefijo -webkit-backdrop-filter y un fallback para navegadores antiguos.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo escribo espacios en los valores arbitrarios de Tailwind?
Usa guiones bajos:
grid-cols-[1fr_auto]. Tailwind los convierte de nuevo en espacios. Para usar un guion bajo real, escápalo como \_.¿Qué es una propiedad arbitraria?
Es una clase con la forma
[property:value] para propiedades CSS que no tienen utilidad en Tailwind, por ejemplo [mask-type:luminance].¿Funciona con Tailwind v3 y v4?
Sí, la sintaxis de corchetes es la misma en ambas. Tailwind v4 también acepta la notación abreviada
(--var) para variables CSS.¿Por qué aparece “color:” dentro de mi clase?
Es un indicador de tipo. Le indica a Tailwind que un valor
var() es un color, así que genera color en lugar de font-size.¿Puedo instalar Generador de valores arbitrarios Tailwind como aplicación web y utilizarla sin conexión?
Sí. Generador de valores arbitrarios Tailwind es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.