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

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.

Pré-requisitos

Um projeto Astro que: - tenha a integração do Tailwind do Astro instalada. - use as coleções de conteúdo do Astro.

Configurando @tailwindcss/typography

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

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'),    // ...  ],}

Guia

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.

   astro

   Copiar código

   Copiar o código para a área de transferência

   ------<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 O plugin @tailwindcss/typography usa modificadores de elementos para estilizar componentes filhos de um contêiner com a classe prose.

   Esses modificadores seguem a seguinte sintaxe geral:

   prose-[element]:classe-a-ser-aplicada

   Por exemplo, prose-h1:font-bold dá a todas as tags <h1> a classe Tailwind font-bold. :::

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.

   astro

   Copiar código

   Copiar o código para a área de transferência

   ---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

• Documentação do Tailwind Typography