tailwind-rendered-markdown.mdx

title	description	i18nReady	type
Style rendered Markdown with Tailwind Typography	Learn how to use @tailwind/typography to style your rendered Markdown.	true	recipe

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.

```shell npm install -D @tailwindcss/typography ``` ```shell pnpm add -D @tailwindcss/typography ``` ```shell yarn add --dev @tailwindcss/typography ```

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

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

Recipe

1. Create a `` component to provide a wrapping `

` with a `` for your rendered Markdown. Add the style class `prose` alongside any desired [Tailwind element modifiers](https://tailwindcss.com/docs/typography-plugin#element-modifiers) in the parent element.

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

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

• Tailwind Typography Documentation