import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

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

Un proyecto de Astro que:

Configuración de @tailwindcss/typography

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

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

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

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.

    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>

    :::tip 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.

    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

Cursos Astro