search

code-hike / codehike

Build rich content websites with Markdown and React
https://codehike.org
MIT License
4.68k stars 142 forks source link

[mdx] Code has extra padding when using with tailwind's prose #115

Closed pomber closed 2 years ago

pomber commented 2 years ago

image

cabljac commented 2 years ago

ah i ran into this, i ended up adding some css to remove the padding, nice

DanielFGray commented 2 years ago

I have also noticed some interesting padding/margin issues with tailwind prose 1643485620-369x555 specifically that code blocks followed by an h1 (but not h2??) are missing some top margin

also, and this may not be prose related, but it is difficult to get spacing between two CH blocks that are direct siblings

pomber commented 2 years ago

Try version 0.3.0--canary.116.9a0c186.0 if you can and let me know. I made several changes including adding the not-prose class and also default vertical margins. I changed some ch classes, so if you had custom CSS it may stop working.

pomber commented 2 years ago

I'll close this one but let me know if you see something wrong with tailwind + codehike

cwlittle commented 1 year ago

Codehike is overriding specified font sizes with media queries from tailwind.

 <article className="prose-stone prose md:prose-lg md:prose-code:text-lg">
  <MDXRemote
    className=""
    {...content}
    components={components}
    style={{
      boxShadow: "none",
    }}
  />
</article>

In this case md:prose-code:text-lg works without CH, but not with.

pomber commented 1 year ago

font-size for the code is a special case, you'll need to add a specific rule to override code hike style