Prose (Tailwind Typography)

prose es la clase mágica del plugin @tailwindcss/typography. Convierte cualquier bloque de HTML "tonto" (el que sale de un markdown, un editor WYSIWYG o un campo CMS) en tipografía legible y bien jerarquizada sin tocar una sola etiqueta.

Qué es y cuándo usarlo

prose es un componente del plugin oficial @tailwindcss/typography. Aplica un conjunto de estilos a los descendientes de un contenedor: h1–h6, p, ul, ol, blockquote, code, pre, img, table, hr, etc.

Úsalo cuando:

• Renderizas markdown convertido a HTML (posts de blog, documentación, notas).
• Pintas contenido procedente de un CMS (WordPress the_content(), ACF wysiwyg, Notion, MDX).
• No controlas la estructura del HTML, solo el contenedor.

No lo uses cuando:

• Estás diseñando UI (botones, cards, navs, formularios). Para eso, usa los tokens y clases utilitarias de FDS directamente.
• Necesitas un control fino del spacing entre elementos: prose impone su propio ritmo vertical.

Activación en FDS

FDS ya carga el plugin en src/styles/tailwind.css:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

No tienes que instalar nada extra: la clase prose y todos sus modificadores están disponibles en cualquier proyecto que importe FDS.

Uso básico

<article class="prose">
  <h1>Título del post</h1>
  <p>Un párrafo introductorio que da contexto al lector.</p>
  <h2>Sección</h2>
  <p>Cuerpo de texto con un <a href="#">enlace</a> y <strong>énfasis</strong>.</p>
  <ul>
    <li>Primer punto</li>
    <li>Segundo punto</li>
  </ul>
  <blockquote>Una cita destacada.</blockquote>
  <pre><code>console.log('hola')</code></pre>
</article>

Sin más clases, ese HTML se renderiza con jerarquía, espaciado vertical, listas con bullets, código monoespaciado, blockquote indentado y enlaces con color.

Tamaños

Cinco variantes de escala. Se aplican junto a prose en el contenedor:

<article class="prose prose-lg">…</article>

Cada variante recalibra font-size, line-height y los márgenes verticales de todos los elementos hijos para mantener el ritmo.

Color

El plugin define paletas de color completas. Cambias el "tono" de toda la prosa con un modificador:

<article class="prose prose-slate">…</article>
<article class="prose prose-gray">…</article>
<article class="prose prose-zinc">…</article>
<article class="prose prose-neutral">…</article>
<article class="prose prose-stone">…</article>

Cada paleta ajusta el color de cuerpo, headings, enlaces, código, bordes y blockquote de forma coherente.

Dark mode

<article class="prose dark:prose-invert">…</article>

prose-invert invierte la paleta para fondos oscuros. Combinado con la variante dark de Tailwind se activa automáticamente cuando aplica.

Element overrides

Lo más potente: cualquier elemento se puede sobrescribir desde el contenedor con prose-{elemento}:{utilidad}.

<article class="prose
                prose-headings:font-display
                prose-headings:tracking-tight
                prose-h1:text-5xl
                prose-a:text-primary-600
                prose-a:no-underline
                hover:prose-a:underline
                prose-blockquote:border-primary-500
                prose-code:text-primary-700
                prose-code:before:content-none
                prose-code:after:content-none
                prose-img:rounded-2xl
                prose-img:shadow-lg">
  …
</article>

Modificadores soportados (lista no exhaustiva): prose-headings, prose-h1 … prose-h4, prose-p, prose-a, prose-strong, prose-em, prose-blockquote, prose-code, prose-pre, prose-ul, prose-ol, prose-li, prose-img, prose-figure, prose-figcaption, prose-hr, prose-table, prose-th, prose-td, prose-lead.

Receta FDS recomendada

Para un post estándar dentro de un proyecto FDS:

<article class="prose prose-lg prose-slate
                dark:prose-invert
                max-w-none
                prose-headings:font-display
                prose-headings:tracking-tight
                prose-a:text-primary-600
                prose-a:font-medium
                prose-a:no-underline
                hover:prose-a:underline
                prose-blockquote:border-l-primary-500
                prose-blockquote:not-italic
                prose-img:rounded-xl">
  {{ contenido }}
</article>

Notas:

• max-w-none desactiva el max-width: 65ch que prose aplica por defecto. Úsalo cuando ya controlas el ancho desde el padre.
• prose-headings:font-display engancha la --font-display de FDS.
• text-primary-600 reusa la paleta OKLCH de FDS, así si el cliente cambia la primary, los enlaces siguen.

Excluir partes con not-prose

A veces dentro de un bloque de prose hay un widget, un embed o un componente UI que no debe heredar los estilos:

<article class="prose">
  <h1>Mi post</h1>
  <p>Texto normal.</p>

  <div class="not-prose">
    <!-- Aquí prose no aplica: ideal para callouts, embeds, demos -->
    <button class="btn">Suscribirse</button>
  </div>

  <p>Sigue el texto.</p>
</article>

Pitfalls comunes

• Aplicar prose a un layout de UI. prose mete max-width, margin-top en headings y otras decisiones que pelean con cualquier grid de aplicación. Resérvalo a contenedores de contenido.
• Olvidar max-w-none. Si tu artículo ya está dentro de un max-w-3xl, el 65ch por defecto de prose lo encoge aún más.
• Pelear con prose-code. Por defecto añade comillas (``) alrededor del código inline. Quítalas con prose-code:before:content-none prose-code:after:content-none.
• Mezclar dos sistemas tipográficos. Si la página ya usa la escala fluida de FDS para los headings, no apliques prose encima: elige uno.
• Esperar que prose afecte a clases utilitarias. prose solo estiliza elementos HTML "desnudos" (sin clases). Un <h2 class="text-xl"> mantiene text-xl y prose no lo toca.

Referencia rápida