Pular para o conteúdo

Estilize o Markdown renderizado com Tailwind Typography

Você pode usar o plugin de tipografia do Tailwind para estilizar o Markdown renderizado de fontes como as coleções de conteúdo do Astro.

Este guia irá te ensinar a criar um componente Astro reutilizável para estilizar seu conteúdo Markdown usando as classes utilitárias do Tailwind.

Um projeto Astro que:

Para começar, instale o @tailwindcss/typography usando o seu gerenciador de pacotes preferido.

Terminal window
npm install -D @tailwindcss/typography

Em seguida, adicione o pacote como um plugin no seu arquivo de configuração do Tailwind.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
  1. Crie um componente <Prose /> para fornecer uma <div> com um <slot /> que envolva seu Markdown renderizado. Adicione a classe de estilo prose juntamente com quaisquer modificadores de elementos do Tailwind desejados no elemento pai.

    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. Consulte sua entrada de coleção na página em que deseja renderizar seu Markdown. Passe o componente <Content /> de await entry.render() para <Prose /> como um componente filho para envolver seu conteúdo Markdown em estilos do 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>
Contribua

O que passa em sua cabeça?

Comunidade