How to override markdown link styles?

[nktnet1]

Could you provide an example of how I can override the markdown link style?

For example, changing the text and underline (decoration ) to blue, similar to at the end of this:

I've tried things like overriding tags in global tailwind css, but that also changes the sidebar and other links. How do we override just the markdown links in .md and .mdx?

[fuma-nama]

We use Tailwind CSS Typography, use their utilities to customise it. Like prose-a:

[nktnet1]

thanks @fuma-nama - I tried something like this in global.css:

.prose a {
  @apply text-blue-800 dark:text-blue-200 underline decoration-blue-800 dark:decoration-blue-200;
}

Which worked for the most part, but the headings also changed :(.

Couldn't figure out how to override prose-a specifically.

Do you know how to make it affect only links that are of the form

## Don't apply style to this heading

But apply to this link here: [my-markdown-link](www.google.com)

[fuma-nama]

You can use :not CSS selectors for this

[nktnet1]

Thanks a lot @fuma-nama 🙏 ❤️ .

I ended up going with this which worked:

.prose li a:not(.custom-link-style),
.prose p a:not(.custom-link-style),
.prose td a:not(.custom-link-style),
.prose blockquote a:not(.custom-link-style) {
  @apply text-blue-800 dark:text-blue-200 underline decoration-blue-800 dark:decoration-blue-200;
}

Not sure if there's a way to reduce repetition, but I'm generally happy with this :). Thank you!