#<ul> and <li> tags lose it's style after render from .MD and .MDX

1 messages · Page 1 of 1 (latest)

river marten
#

I created the blog template and compare it with mine, which I started from the same template, but for some reason, as you can see in the first image, the <ul> and <li> tags are not stylized like they should when they are rendered from a .MD or .MDX file.

I don't have any special style applied in my personal css file and the global one has been kept the same.

Since I can't share the files here (I think) in the second image I show my [...slug].astro component to see if there's any error there.

If there's anything I else I need to provide, please ask.

Screenshot_2024-04-22_at_3.32.01_PM.png Screenshot_2024-04-22_at_3.42.49_PM.png
stray meadow
#

This is probably due to Tailwind resetting all styles. If you add a wrapper div with the class name prose you can get the styling back

#

You can see on the right side of your split view screenshot example that there actually is such a div.prose there

#

(It says Inherited from div.prose in the inspector)

river marten
#

what should I wrap exactly? the <slot/> on the Layout or the <Content /> in the [...slug] ??

stray meadow
#

I‘d suggest wrapping the Content as this is where you expect the prose styles to be applied to Markdown/MDX content

#

Unless you also want to create a specific layout for all your files that involve Markdown/MDX content, then you can of course do it in this layout as well

#

(Line 64)

river marten
#

Well, it was two things. One, that I was missing the wrapper with a div and also the require('@tailwindcss/typography'). Although, that plugin messed up some main styles, the .MD now has the correct style applied to them.

Thanks!