Tailwind Styling to Markdown

[JonLangfordUK]

Sorry if this is a dumb question, new to Svelte, Typescript and web dev in general.

But I'm struggling to apply Tailwind styling to the elements svelte-exmarkdown is creating. For example, all heading are the same font size, no matter if they are # or #####.

Is it possible to define how the elements generated from the markdown are presented using Taiwind classes? For example, for a # I may want to add this to the element = class="text-white font-bold text-4xl mb-8"

I'm loving the response time, and the compatibility with rehype, so I'm hoping I get this working for my portfolio site.

Small example of what I've done so far:

<script lang="ts">
  import type { Plugin } from "svelte-exmarkdown";
  import Markdown from "svelte-exmarkdown";
  import { gfmPlugin } from "svelte-exmarkdown/gfm";

  let md = `
# Heading 1
## Heading 2
### Heading 3
#### Heading 4

| Option | Description |
| - | - |
| A | Option A |
| B | Option B |
| C | Option C |
`;

  const plugins: Plugin[] = [gfmPlugin(), {}];
</script>

<div class="m-16 flex flex-col justify-center items-center">
  <div class="max-w-md text-center">
    <h1 class="text-white font-bold text-4xl mb-8">Blog</h1>
  </div>

  <Markdown {md} {plugins} />
</div>

Results in:

[ssssota]

You can choose between two methods.

1. Custom renderer
2. :global(*) CSS selector

Please check the demo: https://stackblitz.com/edit/svelte-exmarkdown-tailwind?file=src%2FApp.svelte&terminal=dev

[JonLangfordUK]

Fantastic, thank you so much! It worked a treat!