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

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

El creador de componentes React con Tailwind es una herramienta gratuita del navegador que genera un componente de React con estilos de Tailwind CSS. El usuario elige un tipo de componente, como un botón o un campo de texto, ajusta algunas opciones de estilo y la herramienta muestra una vista previa en vivo junto al código JSX correspondiente. Todo se ejecuta en el navegador. No hace falta una cuenta ni ninguna llamada a un servidor.

Tipos de componentes

La herramienta puede generar cinco tipos de componentes:

• Botón: un botón en el que se puede hacer clic, con texto personalizado
• Campo de texto: un campo de formulario de una sola línea con texto de marcador de posición
• Área de texto: un campo de formulario de varias líneas con un número fijo de filas
• Selector: una lista desplegable creada a partir de una lista de opciones
• Ruta de navegación: una fila de enlaces que muestra la ubicación de una página dentro de un sitio, como Inicio / Productos / Categoría

Qué propiedades 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 predeterminado del botón
• Radio del borde (redondeo de las esquinas): ninguno, pequeño, mediano, grande o totalmente redondeado
• Ancho: automático, completo, la mitad, un tercio o un cuarto

Algunas propiedades solo aparecen para ciertos 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 selector y la lista de elementos de una ruta de navegación. Los campos de texto, las áreas de texto y los selectores también tienen casillas «obligatorio» y «deshabilitado»; los botones también tienen una casilla «deshabilitado».

Cuatro propiedades son fijas y no se pueden cambiar desde 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). Todo componente generado lleva esas mismas cuatro clases. Para usar otro margen, borde o tamaño de fuente, edite a mano el código copiado.

Cómo se construye la lista de clases generada

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

1. La clase del color del texto, si se ha definido una
2. La clase del color de fondo, si se ha definido una
3. Las clases de relleno, margen, borde y radio del borde
4. La clase del ancho, salvo que el ancho sea «automático»
5. Las clases fijas de tamaño y grosor de fuente
6. Las clases de los estados interactivos (hover, focus, active), que difieren 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 recibe además cursor-pointer. En cambio, los campos de texto, las áreas de texto y los selectores 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 azul 500, el relleno predeterminado del botón py-2 px-4 y redondeo mediano), la herramienta genera:

Ejemplo: campo de texto

Con texto gris, fondo blanco, relleno pequeño, radio del borde grande, ancho completo y «obligatorio» marcado:

Ejemplo: área de texto y selector

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

Un selector con los mismos colores y el mismo relleno que el ejemplo del campo de texto anterior, redondeo mediano, ancho completo, «obligatorio» marcado y tres opciones:

Ejemplo: ruta de navegación

Los enlaces y los separadores de la ruta 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 redondeo:

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 se modifica el ancho del cuadro de vista previa, de modo que se puede ver aproximadamente cómo se vería un componente en una pantalla más estrecha. No añade al código generado ningún prefijo de punto de ruptura de Tailwind, como sm:, md:, lg: o xl:. El resultado JSX es el mismo sea cual sea la vista adaptable seleccionada. Quien necesite que un componente se vea distinto en diferentes anchos de pantalla debe añadir por su cuenta esas clases de puntos de ruptura al código copiado.

Cómo agregar Tailwind CSS a un proyecto de React

Las clases generadas son clases de Tailwind CSS v3. Tailwind CSS v4 eliminó las utilidades bg-opacity-* y las directivas @tailwind, por lo que la clase hover:bg-opacity-90 del botón no tiene efecto en un proyecto con v4. La configuración de v3 para un proyecto con Vite y React es la siguiente:

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

Preguntas frecuentes

¿Qué hace el creador 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 ajustan las opciones.

¿La herramienta añade automáticamente clases de puntos de ruptura adaptables como sm: o md:? No. El control móvil/tableta/escritorio solo cambia el tamaño del cuadro de vista previa. El código exportado no incluye clases sm:, md:, lg: ni xl:; si hacen falta, deben añadirse a mano.

¿Puedo cambiar el margen, el estilo del borde o el tamaño de fuente? No desde la interfaz. Todo componente generado usa el mismo margen fijo (m-0), borde (border border-transparent), tamaño de fuente (text-base) y grosor de fuente (font-medium). Para cambiarlos, edite directamente el código copiado.

¿La herramienta guarda mis componentes? No. No tiene función de guardado. Copie el código generado y guárdelo en los archivos del propio proyecto.

¿Genera TypeScript? La herramienta genera JSX (sintaxis de JavaScript). El resultado es marcado JSX sin más, 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 por completo en el navegador, sin cuenta y sin enviar ninguna solicitud a un servidor.

¿Funciona con Next.js, Gatsby u otros marcos de React? Sí. El código generado es JSX sin más, con clases de Tailwind, por lo que funciona en cualquier marco basado en React que tenga Tailwind CSS v3 configurado.

Referencias

1. Tailwind Labs. Install Tailwind CSS with Vite (documentación de v3). Instalar Tailwind CSS con Vite — npm install -D tailwindcss@3 postcss autoprefixer, npx tailwindcss init -p, las rutas de content y las tres directivas @tailwind.
2. Tailwind Labs. Responsive Design (documentación de v3). Diseño adaptable — los prefijos de puntos de ruptura predeterminados sm, md, lg, xl y 2xl.
3. Tailwind Labs. Upgrade guide. Actualización a Tailwind CSS v4 — v4 elimina las directivas @tailwind y las utilidades obsoletas bg-opacity-*.