Utilidades comunes de Tailwind para spacing, color, tipografía, flex y position, además de cualquier forma arbitraria [value] o [prop:value]. Las variantes aún no se soportan.

¿Por qué un selector?

La salida es una regla CSS única. Elegir el selector te permite pegarla directamente en la hoja de estilos sin renombrar.

¿Variantes responsive y hover están soportadas?

Aún no — exigen wrapper de media query o pseudoclase. Quita prefijos md:, hover: y dark: antes de pegar; las utilidades base hacen round-trip limpio.

No. Usa la escala estándar. Spacing o colores customizados caen en arbitrary; aun así, el CSS resultante funciona.

¿Puedo pasar el CSS por el conversor inverso?

Sí — para utilidades simples el round-trip es exacto. Los arbitrary sobreviven; las declaraciones sin soporte siguen como clases arbitrarias.

No. Todo el proceso queda en esta pestaña; Toova no ve tus listas de clases ni tus selectores ni el output.

Tailwind a CSS — utilidades en una regla

Utilidades Tailwind → CSS

Privacidad por diseño — se ejecuta completamente en tu navegador

Pega una lista de utilidades Tailwind y un selector y Toova arma la regla CSS correspondiente. Las clases arbitrarias como p-[13px] o [grid-template-columns:1fr_2fr] vuelven a declaraciones crudas, listas para una hoja de estilos.

Cuándo conviene el camino inverso

A veces prototipas con Tailwind pero entregas CSS — un email de marketing, un widget de terceros, una entrega a un CMS que no carga Tailwind. El conversor pliega la lista en una sola regla con el selector que elijas y la pegas tal cual, sin renombrar ni limpiar el markup de playground.

Cómo regresan los valores arbitrarios

Las clases arbitrarias llevan el valor inline: p-[13px] es padding: 13px y [grid-template-columns:1fr_2fr] es grid-template-columns: 1fr 2fr. El conversor desempaqueta ambas formas literalmente, así cualquier valor codificado por JIT sobrevive sin tablas extras.

Límites y round-trip

Las variantes responsive (md:flex), de estado (hover:bg-black) y dark mode (dark:text-white) requieren media query o pseudoclase, así que el conversor aún no las emite — quítalas antes de pegar. Tokens del theme (text-brand) caen en la escala por defecto; con theme customizado tendrás fallbacks arbitrarios. Utilidades simples hacen round-trip limpio con CSS-to-Tailwind.

Preguntas frecuentes

¿Qué se convierte?: Utilidades comunes de Tailwind para spacing, color, tipografía, flex y position, además de cualquier forma arbitraria [value] o [prop:value]. Las variantes aún no se soportan.
¿Por qué un selector?: La salida es una regla CSS única. Elegir el selector te permite pegarla directamente en la hoja de estilos sin renombrar.
¿Variantes responsive y hover están soportadas?: Aún no — exigen wrapper de media query o pseudoclase. Quita prefijos md:, hover: y dark: antes de pegar; las utilidades base hacen round-trip limpio.
¿Entiende mi theme?: No. Usa la escala estándar. Spacing o colores customizados caen en arbitrary; aun así, el CSS resultante funciona.
¿Puedo pasar el CSS por el conversor inverso?: Sí — para utilidades simples el round-trip es exacto. Los arbitrary sobreviven; las declaraciones sin soporte siguen como clases arbitrarias.
¿Mi input se sube?: No. Todo el proceso queda en esta pestaña; Toova no ve tus listas de clases ni tus selectores ni el output.