Cómo usar

Cuatro pasos: pega, ejecuta, revisa y copia. Todo ocurre en tu navegador.

Pega el contenido

Introduce CSS, HTML, JSON u otro texto. No se sube nada.

Ejecuta la herramienta

Pulsa Convertir o Ejecutar. El resultado aparece al instante.

Revisa la salida

Lee el código generado y las notas antes de usarlo.

Copia y usa

Copia el resultado y pégalo en tu proyecto.

Sobre esta herramienta

Aplica sangría al HTML para que la estructura anidada quede a la vista antes de convertir estilos o revisar los landmarks de accesibilidad. No corrige marcado inválido: para eso siguen siendo necesarios los validadores.

Ejemplo

El ejemplo es un bloque hero escrito en una sola línea.

Entrada

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

Salida

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

Consejo

Si la sangría se desplaza donde no esperabas, casi siempre falta una etiqueta de cierre en el original.