Tailwindcss runs over MDsveX classes?

[gneyal]

In my +layout.svelte file if I comment the import app.css file - MDsveX works fine, but if I keep uncommented MDsveX's is not working properly. That is, a line like
# hello

will just come out as an <h1> element but will look the same as a <p>.

What am I missing?

[Pelps12]

Use the @apply directives Tailwind offers to generate a class you wrap the mdsvex output in

[TheOtherBrian1]

Leaving this here in case someone comes across this issue.

STEPS TO SOLVE:

1. install tailwind typography:

It's a plugin for adding styles to blank HTML, such as what's generated by MDsvex

npm install -D @tailwindcss/typography

2. Add the tailwind plugin to your tailwind.config.js file

import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],

  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'), //<------------- add plugin
  ],
} satisfies Config;

3. Create a layout file:

This will use the prose class from Tailwind Typography to style your markdown

MarkdownLayout.svelte

<div class=" prose">
	<slot />
</div>

4. Add your layout file's path to mdsvex in svelte.config.js

//...
mdsvex({
      layout: {
        _: 'src/lib/MarkdownLayout.svelte'
      },
//...

5. customize your prose class

Tailwind Typography provides many resources to customize it for your app:

• https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#element-modifiers

It would be great if someone could get this into the main site or a readme.