svelte-calendar not rendering properly with Tailwind

Question

I recently updated the svelte dependencies for a project and at some point it appears that Tailwind and svelte-calendar have stopped playing well together. I've reduced it down to a very basic app as below:

<script>
  import { Datepicker } from "svelte-calendar"
</script>

<Datepicker />

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

If Tailwind's utility classes are loaded, it completely breaks the grid rendering of the calendar:

I'm using Tailwind extensively in this project and don't want to remove it. Is there a way to get it to play nicely with a third party component like this? I've tried setting utility classes as unimportant and added a prefix but it made no observable difference.

module.exports = {
  important: false,
  prefix: 'tw-',
}

Answer 1

I had the same issue.. Added the following hack to get it to work:

function fixHeight(node: HTMLElement) {
    node.firstChild.firstChild.style.minHeight = '60vh';
    node.querySelector('.controls').style.minHeight = '5rem';
}

        <div use:fixHeight style="margin-bottom: 5rem">
            <InlineCalendar
            />
        </div>