¿Qué es Tailwind CSS? Guía sencilla para creadores de apps

Tailwind CSS es un kit de herramientas para dar estilo a sitios web. En lugar de escribir reglas de estilo en un archivo aparte, asignas a cada elemento nombres de clase cortos y ya listos: bg-white para un fondo blanco, p-4 para el relleno, text-lg para un texto más grande, rounded-xl para las esquinas redondeadas. Tailwind genera el CSS que necesita el navegador. Es gratuito, de código abierto y una de las formas más comunes de dar estilo a las aplicaciones web modernas.

Por qué importa Tailwind cuando creas con IA

Si creas una aplicación web con un creador de apps con IA, es muy probable que tu app esté estilizada con Tailwind. Mythex, por ejemplo, empieza los proyectos nuevos con Vite + React + TypeScript + Tailwind, salvo que pidas otra cosa (cómo se elige la tecnología).

Eso te afecta de tres maneras:

• Los cambios de diseño son baratos. Como el estilo vive junto a cada botón, tarjeta o título, la IA puede aplicar «que las tarjetas no estén tan apretadas» editando unas pocas clases en un solo sitio.
• Puedes leerlo. Las clases de Tailwind se parecen al lenguaje natural. text-center font-bold text-2xl no es difícil de descifrar, aunque nunca hayas escrito código.
• El aspecto se mantiene coherente. Tailwind trae una escala fija de tamaños, espaciados y colores. Así una app no acaba con 14 grises ligeramente distintos.

Una analogía cotidiana

Piensa en pintar una casa.

El CSS puro es como mezclar tu propia pintura para cada pared. Tienes libertad total, pero con el tiempo el salón es «blanco cálido», el pasillo es «blanco un poco más cálido» y nadie recuerda por qué.

Tailwind es como una carta de colores de una tienda de pintura, más un juego de etiquetas con nombre. Cada pared lleva una etiqueta («blanco, mate, dos manos»), y la carta solo ofrece un conjunto seleccionado de tonos. Pierdes un poco de libertad, pero todos en la obra saben exactamente cómo debe quedar cada pared con solo leer la etiqueta.

Cómo funciona Tailwind

Una página web se construye con HTML (el contenido y la estructura) y CSS (el aspecto). Normalmente, el CSS vive en un archivo aparte con reglas como esta:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Con Tailwind, te ahorras escribir esa regla y pones clases de utilidad directamente en el elemento:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Tu reserva está confirmada
</div>

Cada clase hace un trabajo pequeño. Cuando se construye la app, Tailwind analiza tus archivos, encuentra las clases que realmente usaste y genera solo el CSS de esas. Así la hoja de estilos final es pequeña.

Tailwind versión 4, la versión principal actual, se configura con muy poca configuración: lo instalas, añades su plugin a tu herramienta de construcción y pones @import "tailwindcss"; al principio de tu archivo CSS. Las personalizaciones, como los colores de marca y las fuentes, se definen en CSS como tokens de diseño en lugar de en un gran archivo de configuración en JavaScript, como hacían las versiones anteriores. Si lees un tutorial antiguo que menciona tailwind.config.js, por eso es.

Un ejemplo práctico: una tarjeta de precios

Imagina que has pedido a tu creador con IA una página de precios y quieres que la tarjeta «Pro» destaque. El código de la tarjeta podría ser así (en un componente de React, class se escribe className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">25 
lt;/p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Empezar prueba
  </button>
</div>

Leyéndolo de izquierda a derecha:

Si pides «haz que la tarjeta Pro destaque con un borde azul y una sombra sutil», la IA podría cambiar border-gray-200 por border-2 border-blue-600 y añadir shadow-lg. Ese es todo el cambio.

Diseño adaptable y modo oscuro

Tailwind tiene prefijos cortos para los tamaños de pantalla y los estados:

• md:grid-cols-3: tres columnas en pantallas medianas y mayores; en un móvil se aplica la columna única por defecto. Tailwind es mobile-first: las clases sin prefijo se aplican siempre, y los prefijos añaden cambios para pantallas más grandes.
• hover:bg-gray-700: un botón más oscuro cuando el ratón está encima.
• dark:bg-gray-900: un fondo distinto cuando el modo oscuro está activado.

Por eso pedir un diseño adaptable a móviles o un modo oscuro suele ser rápido en un proyecto con Tailwind.

Términos clave

Malentendidos comunes

• «Tailwind es un diseño.» No lo es. Tailwind te da bloques de construcción, no un aspecto. Dos sitios hechos con Tailwind pueden verse completamente distintos. El «aspecto genérico de las apps de IA» viene de los valores por defecto, no de Tailwind en sí; dale a tu creador una dirección real. Consulta cómo diseñar una app con buen aspecto con IA.
• «Es lo mismo que los estilos en línea.» No exactamente. Las clases vienen de una escala compartida, admiten hover, modo oscuro y breakpoints, y se convierten en CSS normal durante la construcción.
• «Tailwind hace las páginas pesadas.» La construcción solo incluye las clases que usas, así que el CSS que llega a los visitantes suele ser pequeño.
• «Las listas largas de clases significan código desordenado.» Al principio parecen recargadas, pero todo lo que define el aspecto de un elemento está en un solo sitio. Los patrones repetidos suelen agruparse en componentes, como un único Button.
• «Si uso Tailwind no puedo usar CSS propio.» Sigues pudiendo escribir CSS normal cuando lo necesites.

Qué pedir a tu creador con IA

• «Define los colores y las fuentes de la marca una sola vez como tokens de tema, y úsalos en todas partes en lugar de colores fijos en el código.»
• «Haz que todas las tarjetas, botones y campos usen el mismo radio de esquina y el mismo espaciado.»
• «Revisa el diseño con el ancho de un móvil y corrige lo que se desborde o sea demasiado pequeño para tocarlo.»
• «Añade modo oscuro con la variante dark: de Tailwind y asegúrate de que el contraste del texto siga siendo legible.»
• «Agrupa los estilos de botón repetidos en un único componente Button reutilizable.»
• «Explícame en lenguaje sencillo las clases de Tailwind de esta sección.»

Tailwind en Mythex

Los proyectos nuevos de Mythex usan Tailwind por defecto junto con React y TypeScript, así que puedes pedir cambios visuales con palabras sencillas y verlos en la Vista previa en vivo. Si prefieres ver el código, el editor muestra todas las clases (solo de lectura en Free, editable en Pro). Si prefieres CSS puro o una configuración distinta, dilo en tu primer prompt; la documentación explica cómo se elige la pila tecnológica.

Preguntas