import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

You can use Tailwind's Typography plugin to style rendered Markdown from sources such as Astro's content collections.

This recipe will teach you how to create a reusable Astro component to style your Markdown content using Tailwind's utility classes.

Prerequisites

An Astro project that:

- has [Tailwind's Vite plugin](/en/guides/styling/#tailwind) installed. - uses Astro's [content collections](/en/guides/content-collections/).

Setting Up @tailwindcss/typography

First, install @tailwindcss/typography using your preferred package manager.

Then, add the package as a plugin in your Tailwind configuration file.

css
@import 'tailwindcss';@plugin '@tailwindcss/typography';

Recipe

```astro title="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> ``` :::tip The `@tailwindcss/typography` plugin uses [**element modifiers**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) to style child components of a container with the `prose` class. These modifiers follow the following general syntax: ``` prose-[element]:class-to-apply ``` For example, `prose-h1:font-bold` gives all `<h1>` tags the `font-bold` Tailwind class. :::

2. Query your collection entry on the page you want to render your Markdown. Pass the <Content /> component from await render(entry) to <Prose /> as a child to wrap your Markdown content in Tailwind styles.

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

Resources

دورات Astro