Tailwind or theme cursor issue?

[TopherTimeMachine]

I'm noticing that in the MarkdownEditor the text cursor is not centered where I'm typing. It's actually way off. I start typing where there cursor is but the text is showing up on a different line.

The cursor is where the yellow is. but the text is coming out where the red is. The further I go down in the editor to larger the offset between the cursor and text.

I thought this was a tailwind issue cause the MD wasn't showing up in the preview window correctly.

I've tried using Tailwind Typography like the docs mention. But looks like the only way to use that is to wrap the the MarkdownEditor in a div like this.

<article class="prose lg:prose-xl"><MarkdownEditor mode="tabs" {carta} bind:value /></article>

This formats the MD correctly but the text cursor in the editor is still not correct.

[BearToCode]

Hello, you need to specify your font and line height, as stated in the Getting Stated example, otherwise they might not match(as in your case). Just need to add the following:

<style>
    /* Or in global stylesheet */
    /* Set your custom monospace font */
    :global(.carta-font-code) {
        font-family: '...', monospace;
        font-size: 1.1rem;
    }
</style>

The Tailwind Typography and other themes do not affect the editor styles: they are stylesheets for the final rendered HTML.

[TopherTimeMachine]

Hello, you need to specify your font and line height, as stated in the Getting Stated example, otherwise they might not match(as in your case). Just need to add the following:

Thanks for the reply! I should have pasted in my whole code. I did have this in there.

now I'm playing with it more and seeing that if I tweak it I can get it closer.

  :global(.carta-font-code) {
    font-family: '...', monospace;
    font-size: 1.1em;
    line-height: 32px;
 }

But this is still off. How can I find the exact values to make this match up? I've been inspecting the textarea element. or do I just need to define them all in this css class maybe?

I'm use the flowbite svelte components. And it in a modal. Wondering if that is causing issues.

[BearToCode]

Usually setting the properties of .carta-font-code is enough. There are probably some conflicting styles. Could you please share a reproducible example?

[WillWilli]

I had this exact same issue. In my case it was due to this piece of CSS coming from styles.css which I was importing in my top level +layout.svelte

pre {
    padding: 0.5em;
}

As soon as I removed that from styles.css the cursor lined up properly.

This CSS is included in the official Sveltekit demo app so maybe also why you had it.

[BearToCode]

I'll close this for now, since I cannot reproduce the issue and the discussion has been inactive. Let me know if you still need help