Styling in svelte/tailwindcss with daisyui

[sittim]

Here is my setup:

• Tailwind CSS V4 is used
• DaisyUI 5.0.12 components are used
• Svelte Kit V2.17.3 is used, svelte V5
• TypeScript is used for the front end

when I do this:

    <div class="carta-sandbox">
      <div aria-labelledby="descEditorLabel">
        <MarkdownEditor
          bind:value={$dsc}
          {carta}
          mode="tabs"
          theme="default"
        />
      </div>
    </div>

it looks like this:

Its OK, but I do not like the tabs.

When I use the github theme, I get this:

for the sandbox div I use:

<style>
  :global(.carta-sandbox) {
    all: initial;
    font-family: inherit;
    line-height: 1.5;
  }
</style>

Do you have any suggestions to make github look a bit better?

[BearToCode]

Hello,

the Github theme from the examples works when there are not other external styles attached. Most probably, an external stylesheet provided by TailwindCSS or DaisyUI (if it has any, I've never used it) is affecting the color of the text.

It's impossible to account for all the possible styles one could set, as I would need to specify all availabe properties that could otherwise be overriden by something else. Therefore, I suggest you use your browser debug tools to see which rules are affecting the elements with the wrong colors, and adjust them accordingly in the Github stylesheet. I do it myself when I use Carta in my applications. It would probably not take to long.