Estilo de Markdown renderizado con Tailwind Typography

Puedes utilizar el plugin de tipografía de Tailwind para estilar el Markdown renderizado de fuentes como las colecciones de contenido de Astro.

Esta receta te enseñará a crear un componente de Astro reutilizable para estilar tu contenido Markdown usando las clases de utilidad de Tailwind.

Prerrequisitos

Sección titulada Prerrequisitos

Un proyecto de Astro que:

• tiene la integración de Tailwind de Astro instalada.
• usa las colecciones de contenido de Astro.

Configuración de @tailwindcss/typography

Sección titulada Configuración de @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.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
   require('@tailwindcss/typography'),
    // ...
  ],
}

Receta

Sección titulada Receta

1. Crea un componente <Prose /> para proporcionar un <div> de envoltura con un <slot /> para tu Markdown renderizado. Añade la clase de estilo prose junto con cualquier modificador de elemento 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 utiliza modificadores de elementos para estilar los 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 Tailwind font-bold.

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

   src/pages/index.astro

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

Recursos

Sección titulada Recursos

• Documentación del plugin de tipografía de Tailwind