Plugin Tailwind Typography

Estilizado de contenido HTML puro

WordPress envía el contenido como cadenas de HTML puro. Debido a que el preajuste de Tailwind restablece todos los estilos predeterminados del navegador, sus encabezados y listas se verán como texto plano. El plugin Typography soluciona esto.

1. Instalación

npm install -D @tailwindcss/typography

2. Configuración

Añada el plugin a su `tailwind.config.ts`:

plugins: [
  require('@tailwindcss/typography'),
]

3. Uso

Envuelva su contenido dinámico en un contenedor con la clase `prose`:

<div className="prose prose-lg lg:prose-xl">
  <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
</div>

4. Beneficios

La clase `prose` aplica automáticamente un espaciado, pesos de fuente y colores armoniosos a cualquier elemento HTML en su interior (h1, h2, blockquote, pre, etc.), asegurando que su blog tenga un aspecto profesional sin necesidad de escribir CSS manual.