Missing CSS when using the instructions

[bluepuma77]

When following the instructions with npm install "@friendofsvelte/tipex" and

<script>
    import { Tipex } from "@friendofsvelte/tipex";
    import "@friendofsvelte/tipex/styles/Tipex.css";
    import "@friendofsvelte/tipex/styles/ProseMirror.css";
    import "@friendofsvelte/tipex/styles/Controls.css";
    import "@friendofsvelte/tipex/styles/EditLink.css";
    import "@friendofsvelte/tipex/styles/CodeBlock.css"; // for code block syntax highlighting

    let htmlContent = `
    <p>This <a target="_blank" rel="noopener noreferrer" href="">content</a> is written by
    <a target="_blank" rel="noopener noreferrer" href="http://bishwas.net/">Bishwas</a> in 2023.
    </p>`;
</script>

<Tipex
    {htmlContent}
    style="margin-top: 1rem; margin-bottom: 0rem;"
    class="h-[70vh] border border-neutral-200 dark:border-neutral-700 w-full"
/>

it seems there is some CSS missing, as the buttons are not next to each other:

What am I missing? Do I need Tailwind CSS?

[bluepuma77]

Stackblitz link

[Bishwas-py]

@bluepuma77 I am sorry, I got a little busy. Lemme have a look at it.

[Bishwas-py]

@bluepuma77 Try adding this into your script:

import "@friendofsvelte/tipex/styles/app.css";

[Bishwas-py]

We will remove that app.css to be imported, in the next version.

[Bishwas-py]

@bluepuma77 Docs updated, please have a look.

[bluepuma77]

Works with import "@friendofsvelte/tipex/styles/app.css";.