Styling code blocks (rehype-highlight)

[perrylets]

I am currently doing a blog based on this guide by Leigh Halliday and while I got the code highlighting to work, I want the code blocks to have a border radius and some other css properties (I am in the middle of the process of converting my vanilla css into tailwindcss). How could I do that?

[wooorm]

This sounds like a question for tailwind or the person you refer to. I prefer CSS: it lets me do all these things without a problem.

There are many ways to solve your problem. I know very little about what you are doing so I can’t say what the exact best solution is.

[perrylets]

I was trying to do it even before I started using tailwind.
The code block looks like this:

(The text is not mine, I am using posts from the guide instead of lorem ipsum)

What I want to do is add some styling to it, like border-radius without affecting the styles that rehype-highlight added to it.

[wooorm]

Please take some time to frame your question. This now sounds like a CSS question. A quick search for css border radius should give you something like:

pre {
  border-radius: 3px;
}

[perrylets]

I tried it, but it isn't applied

[wooorm]

SPEND TIME FRAMING YOUR QUESTION. This is open source, where I am happy to help if you at least do me the courtesy of taking more time to ask your question than I spend answering it.
This is not free customer service.
https://github.com/rehypejs/.github/blob/main/support.md

[perrylets]

I have fixed it. The problem was with next.js css modules dealing with global css.