Saltearse al contenido

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:

Configuración de @tailwindcss/typography

Sección titulada Configuración de @tailwindcss/typography

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

Ventana de terminal
npm install -D @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>

  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