Estilizar Markdown renderizado con Tailwind Typography

Puedes usar el plugin Typography de Tailwind para estilizar el Markdown renderizado de fuentes como las content collections de Astro.

Esta receta te enseñará cómo crear un componente reutilizable de Astro para estilizar tu contenido Markdown usando las utility classes de Tailwind.

Requisitos previos

Un proyecto de Astro que:

• tiene el Vite plugin de Tailwind instalado.
• usa las content collections de Astro.

Configurando @tailwindcss/typography

Primero, instala @tailwindcss/typography usando tu gestor de paquetes preferido.

npm

npm install -D @tailwindcss/typography

pnpm

pnpm add -D @tailwindcss/typography

Yarn

yarn add --dev @tailwindcss/typography

Luego, añade el paquete como un plugin en tu archivo de configuración de Tailwind.

src/styles/global.css

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

Receta

1. Crea un componente <Prose /> para proporcionar un <div> envolvente con un <slot /> para tu Markdown renderizado. Añade la clase de estilo prose junto con cualquier modificador de elementos de Tailwind deseado en el elemento padre.

   src/components/Prose.astro

   ---
   ---
   <div
     class="prose dark:prose-invert
     prose-h1:font-bold prose-h1:text-xl
     prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
     prose-headings:underline">
     <slot />
   </div>

   Consejo

   El plugin @tailwindcss/typography usa modificadores de elementos para estilizar componentes hijos de un contenedor con la clase prose.

   Estos modificadores siguen la siguiente sintaxis general:

   prose-[element]:class-to-apply

   Por ejemplo, prose-h1:font-bold da a todas las etiquetas <h1> la clase font-bold de Tailwind.

2. Consulta la entrada de tu colección en la página donde quieres renderizar tu Markdown. Pasa el componente <Content /> de await render(entry) a <Prose /> como hijo para envolver tu contenido Markdown en estilos de Tailwind.

   src/pages/index.astro

   ---
   import Prose from '../components/Prose.astro';
   import Layout from '../layouts/Layout.astro';
   import { getEntry, render } from 'astro:content';
   
   const entry = await getEntry('collection', 'entry');
   const { Content } = await render(entry);
   ---
   <Layout>
     <Prose>
       <Content />
     </Prose>
   </Layout>

Recursos

• Documentación de Tailwind Typography