¿Qué es Tailwind CSS? Guía en lenguaje sencillo para creadores de apps

Tailwind CSS es un kit de herramientas para dar estilo a sitios web. En lugar de escribir reglas de estilo separadas en su propio archivo, asignas a cada elemento nombres de clase cortos y listos para usar: 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; y Tailwind genera el CSS que necesita el navegador. Es gratuito, de código abierto y una de las formas más habituales de dar estilo a las aplicaciones web modernas.

Por qué Tailwind importa cuando creas con IA

Si creas una aplicación web con un creador de apps con IA, es muy probable que tu app use 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 los estilos viven junto a cada botón, tarjeta y título, la IA puede aplicar «que las tarjetas tengan menos densidad» editando unos cuantos nombres de clase 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, espacios y colores. Eso evita que una app acabe 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 con un juego de etiquetas. Cada pared lleva una etiqueta («blanco, mate, 2 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 saltas 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 una tarea pequeña. Cuando la app se compila, Tailwind revisa tus archivos, encuentra las clases que realmente has usado y genera solo el CSS para ellas. 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 compilación y pones @import "tailwindcss"; al principio de tu archivo CSS. Las personalizaciones, como los colores de marca y las tipografías, se definen en CSS como tokens de diseño, en lugar de en un gran archivo de configuración JavaScript como hacían las versiones anteriores. Si lees un tutorial antiguo que menciona tailwind.config.js, por eso.

Un ejemplo práctico: una tarjeta de precios

Supón 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</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 suave», 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 tamaños de pantalla y estados:

• md:grid-cols-3: tres columnas en pantallas medianas y mayores; en un teléfono se aplica la columna única predeterminada. Tailwind es primero móvil: las clases sin prefijo se aplican en todas partes, 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

Falsas creencias habituales

• «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 app con IA» viene de los valores predeterminados, 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 puntos de quiebre, y se convierten en CSS normal durante la compilación.
• «Tailwind hace las páginas pesadas». La compilación solo incluye las clases que usas, así que el CSS que recibe el visitante suele ser pequeño.
• «Las listas largas de clases significan código desordenado». Al principio parecen cargadas, pero todo lo relativo al aspecto de un elemento está en un solo sitio. Los patrones repetidos normalmente se agrupan en componentes, como un único Button.
• «Si uso Tailwind no puedo usar CSS personalizado». Sigues pudiendo escribir CSS normal cuando lo necesites.

Qué pedir a tu creador con IA

• «Define los colores y tipografías de nuestra 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 la maquetación con el ancho de un teléfono y corrige lo que se desborde o sea demasiado pequeño para pulsarlo».
• «Añade el modo oscuro usando 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 directo. Si prefieres ver el código, el editor muestra todas las clases (de solo lectura en Free y editable en Pro). Si prefieres CSS puro u otra configuración, dilo en tu primer prompt: la documentación explica cómo se elige la pila tecnológica.

Preguntas