Banco de Pruebas Tailwind
Escribe HTML con utilidades de Tailwind CSS v4 y compila en vivo en tu navegador.
¿Qué es el Banco de Pruebas Tailwind?
Es un editor gratuito dentro del navegador donde escribes HTML con clases de utilidad de Tailwind CSS v4 y ves el resultado compilado en una vista previa en vivo. El compilador oficial de Tailwind v4 para navegador viene incluido en la página.
¿Mi código se sube a algún sitio?
No. La compilación ocurre por completo en tu navegador con una copia local del motor de Tailwind. Tu HTML nunca sale de la página y los borradores solo se guardan en el localStorage del navegador.
¿Qué versión de Tailwind utiliza?
Usa Tailwind CSS v4, la última versión principal, mediante el compilador oficial @tailwindcss/browser. Funcionan todas las utilidades básicas, variantes y el tema por defecto, incluidos los valores arbitrarios entre corchetes.
¿Cómo funciona la vista previa en vivo?
Tu HTML se inyecta en un iframe aislado junto con el compilador. Tras cada edición, las utilidades se recompilan tras una pausa de 500 milisegundos, así que escribes con fluidez y la vista previa se mantiene al día.
¿Cómo pruebo los estilos de modo oscuro?
Activa el interruptor «Vista oscura». Añade la clase "dark" al documento de vista previa y el compilador asigna la variante dark: a esa clase, así que utilidades como dark:bg-slate-900 responden de inmediato.
¿Puedo ver el CSS que genera Tailwind?
Sí. El panel «CSS compilado» bajo los editores muestra la hoja de estilos exacta que produjo el compilador para tu marcado, y el botón «Copiar CSS» la copia al portapapeles.
¿Qué contiene el HTML descargado?
El botón Descargar HTML genera un archivo independiente con tu marcado más el CSS compilado incrustado en el head, de modo que la página se ve bien sin conexión, sin enlaces CDN ni internet.
¿Hay plantillas de inicio?
Sí. El selector de plantillas ofrece una sección héroe, una cuadrícula de tarjetas responsive y una tabla de precios de tres niveles, todas con utilidades actuales de v4, además de un punto de partida mínimo en blanco.
Cómo usar Banco de Pruebas Tailwind
Este banco de pruebas ejecuta el compilador oficial de Tailwind CSS v4 para navegador enteramente en tu máquina. Escribes HTML plano con clases de utilidad a la izquierda, el compilador genera el CSS correspondiente dentro de un iframe de vista previa aislado, y un panel inferior muestra la hoja de estilos exacta producida. No se sube nada: el compilador, tu marcado y tus borradores se quedan en el navegador.
- Elige un punto de partida en el selector de Plantilla: Hero, Cuadrícula de tarjetas, Tabla de precios o En blanco; tu texto también se restaura automáticamente entre visitas.
- Edita el HTML en el editor de la izquierda. Pulsar Tab inserta dos espacios, y la vista previa se recompila unos 500 ms después de que dejas de escribir.
- Activa Ajuste de línea para controlar el salto de línea, y el selector de tamaño de fuente para fijar el tamaño del texto del editor.
- Activa Vista previa oscura para añadir la clase "dark" al documento de vista previa; utilidades como dark:bg-slate-900 responden al instante.
- Lee las reglas generadas en el panel CSS compilado y cópialas con Copiar CSS cuando las necesites.
- Usa Copiar HTML para el marcado en bruto, o Descargar HTML para obtener un archivo independiente con el CSS compilado incrustado, listo para abrir sin conexión.
La descarga solo tiene estilos reales tras al menos una compilación, así que deja que la vista previa renderice una vez antes de exportar. Para reducir el CSS generado, elimina del template los elementos sin usar — el panel siempre refleja exactamente lo que tu marcado actual necesita.
Herramientas relacionadas
- Laboratorio de Código Laboratorio online de HTML, CSS y JavaScript con vista previa en vivo, editor con números de línea y consola capturada. Prueba fragmentos al instante y descarga el resultado como un archivo HTML - todo en tu navegador.
- Generador CSS Grid Generador visual gratuito de CSS Grid con vista previa en vivo. Diseña cuadrículas responsivas interactivamente y exporta código CSS listo para producción.
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Probador de Solicitudes HTTP Prueba APIs REST directamente en tu navegador. Envía solicitudes GET, POST, PUT, DELETE con headers, body y parámetros personalizados. Ve el estado, headers y cuerpo JSON al instante.
- Generador .htaccess Genere reglas .htaccess de Apache para redirecciones, reescrituras, cabeceras de seguridad, caché y más.
- Generador de Robots.txt Generador gratuito de robots.txt en línea. Cree y personalice archivos robots.txt para controlar el rastreo de motores de búsqueda, gestionar el acceso de rastreadores y optimizar el SEO de su sitio.
- Generador de Sitemap Generador gratuito de sitemap XML en línea. Agregue URLs, configure prioridades y frecuencias, cree sitemaps SEO al instante.