Generador de Componentes React Tailwind - Vista Previa en Vivo y Generador de Código

¿Qué es el generador de componentes React con Tailwind?

El generador de componentes React con Tailwind es una herramienta gratuita para el navegador que crea un componente de React con estilos de Tailwind CSS. Se elige un tipo de componente, como un botón o un campo de texto, se ajustan algunas opciones de estilo y la herramienta muestra una vista previa en vivo junto con el código JSX correspondiente. Todo se ejecuta en el navegador. No se necesita una cuenta ni realizar ninguna solicitud a un servidor.

Tipos de componentes

La herramienta puede generar cinco tipos de componentes:

• Button — un botón en el que se puede hacer clic y cuyo texto se puede personalizar
• Text input — un campo de formulario de una sola línea con texto de marcador de posición
• Textarea — un campo de formulario de varias líneas con un número determinado de filas
• Select — una lista desplegable creada a partir de una lista de opciones
• Breadcrumb — una fila de enlaces que muestra la ubicación de una página dentro de un sitio, como Inicio / Productos / Categoría

Propiedades que se pueden cambiar

Cinco propiedades de estilo se aplican a todos los tipos de componentes:

• Color del texto — blanco, negro, gris, azul, rojo o verde
• Color de fondo — ninguno, blanco, gris claro, azul, rojo o verde
• Relleno (espaciado interior) — ninguno, pequeño, mediano, grande o el valor predeterminado del botón
• Radio del borde (redondeo de las esquinas) — ninguno, pequeño, mediano, grande o completamente redondeado
• Ancho — automático, completo, la mitad, un tercio o un cuarto

Algunas propiedades solo aparecen para determinados tipos de componentes: el texto del botón, el texto de marcador de posición de un campo de texto o un área de texto, el número de filas de un área de texto, la lista de opciones de un elemento de selección y la lista de elementos de una ruta de navegación. Los campos de texto, las áreas de texto y los elementos de selección también tienen casillas «obligatorio» y «deshabilitado»; los botones tienen además una casilla «deshabilitado».

Hay cuatro propiedades fijas que no se pueden cambiar mediante la interfaz: el margen (siempre m-0), el estilo del borde (siempre border border-transparent), el tamaño de fuente (siempre text-base) y el grosor de fuente (siempre font-medium). Todos los componentes generados incluyen estas mismas cuatro clases. Para usar otro margen, borde o tamaño de fuente, hay que editar manualmente el código copiado.

Cómo se crea la lista de clases generada

La herramienta crea la cadena de clases de Tailwind para cada componente en un orden fijo:

1. La clase del color del texto, si se ha establecido
2. La clase del color de fondo, si se ha establecido
3. Las clases de relleno, margen, borde y radio del borde
4. La clase del ancho, a menos que el ancho esté establecido como «automático»
5. Las clases fijas del tamaño y el grosor de fuente
6. Las clases de los estados interactivos (al pasar el cursor, al enfocar y al activar), que varían según el tipo de componente
7. Las clases del estado deshabilitado, si se marca «deshabilitado»

Los botones reciben hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 y focus:ring-blue-500. Un botón que no está deshabilitado también recibe cursor-pointer. En cambio, los campos de texto, las áreas de texto y los elementos de selección reciben focus:outline-none, focus:ring-2, focus:ring-blue-500 y focus:border-blue-500. Las rutas de navegación no reciben ninguna de estas clases interactivas, y el estado deshabilitado nunca se aplica a una ruta de navegación, ya que una lista de navegación no puede deshabilitarse.

Ejemplo: botón

Con la configuración predeterminada (texto blanco, fondo blue-500, relleno mediano y esquinas redondeadas), la herramienta genera:

Ejemplo: campo de texto

Con texto gris, fondo blanco, relleno pequeño, radio de borde grande, ancho completo y la opción «obligatorio» marcada:

Ejemplo: área de texto y elemento de selección

Las áreas de texto y los elementos de selección siguen la misma regla de creación de clases que los campos de texto. Un área de texto con texto negro, relleno mediano, redondeado mediano, ancho completo y 4 filas:

Un elemento de selección con los mismos colores y espaciado que el ejemplo anterior del campo de texto, y con tres opciones:

Ejemplo: ruta de navegación

Los enlaces y separadores de las rutas de navegación siempre usan clases fijas (hover:text-blue-600 en los enlaces, mx-2 text-gray-400 en el separador "/"). Solo la lista exterior recibe las cinco propiedades de estilo compartidas. Con texto gris y sin relleno ni redondeado:

Vista previa adaptable frente a clases adaptables

La herramienta tiene un control «Vista adaptable» con tres opciones: móvil, tableta y escritorio. Al cambiar entre ellas solo cambia el ancho del cuadro de vista previa, para mostrar aproximadamente cómo se vería un componente en una pantalla más estrecha. No añade ningún prefijo de punto de interrupción de Tailwind, como sm:, md:, lg: o xl:, al código generado. El resultado JSX es el mismo independientemente de la vista adaptable seleccionada. Si se necesita que un componente tenga un aspecto diferente según el ancho de la pantalla, hay que añadir manualmente esas clases de punto de interrupción al código copiado.

Cómo añadir Tailwind CSS a un proyecto de React

1. Instalar los paquetes: npm install -D tailwindcss postcss autoprefixer
2. Configurar los archivos de configuración: npx tailwindcss init -p
3. Enumerar los archivos de origen del proyecto en tailwind.config.js, dentro de content
4. Añadir las tres directivas de Tailwind al archivo CSS principal: @tailwind base; @tailwind components; @tailwind utilities;
5. Pegar un componente generado en un archivo de React

Preguntas frecuentes

¿Qué hace el generador de componentes React con Tailwind?
Genera un componente de React con estilos y sus clases de Tailwind CSS correspondientes, y muestra una vista previa en vivo mientras se ajusta la configuración.

¿La herramienta añade automáticamente clases de puntos de interrupción adaptables como sm: o md:?
No. El control para móvil, tableta y escritorio solo cambia el tamaño del cuadro de vista previa. El código exportado no contiene clases sm:, md:, lg: ni xl:; hay que añadirlas manualmente cuando sean necesarias.

¿Se puede cambiar el margen, el estilo del borde o el tamaño de fuente?
No mediante la interfaz. Todos los componentes generados usan el mismo margen fijo (m-0), borde (border border-transparent), tamaño de fuente (text-base) y grosor de fuente (font-medium). Estos valores se cambian editando directamente el código copiado.

¿La herramienta guarda mis componentes?
No. No hay ninguna función para guardar. El código generado debe copiarse y almacenarse en los propios archivos del proyecto.

¿Genera TypeScript?
La herramienta produce JSX (sintaxis de JavaScript). El resultado es marcado JSX simple, por lo que se puede pegar en un archivo .tsx sin cambios, aunque no se generan definiciones de tipos.

¿La herramienta es gratuita?
Sí. Se ejecuta completamente en el navegador, sin cuenta y sin enviar solicitudes a un servidor.

¿Funciona con Next.js, Gatsby u otros frameworks de React?
Sí. El código generado es JSX simple con clases de Tailwind, por lo que funciona en cualquier framework basado en React que tenga Tailwind CSS configurado.