Date picker runs vertically down the screen

[mathijsfr]

I am working with nuxt3 and I added the date picker as plugin like so:

import LitepieDatepicker from 'litepie-datepicker-tw3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(LitepieDatepicker)
})

My datepicker.vue component looks like this:|

<template>
  <div>
    <litepie-datepicker
      i18n="nl"
      placeholder="Laatste 28 dagen"
      :disable-date="dDate"
      :formatter="formatter"
      separator=" t/m "
      :modelValue="props.modelValue"
      @update:modelValue="emit('update:modelValue', $event)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: Object,
})

const formatter = ref({
  date: 'DD MMM YYYY',
  month: 'MMM'
});

const dDate = (date) => {
  return date > new Date();
}

However, after importing the component I get the following result on a local build (npm run dev):

And this when clicking (uses entire screen):

I have tailwind version 3.2.1 and I added path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js') to my tailwind.config.js content.

[mathijsfr]

Upon closer inspection it looks like the media queries aren't running properly. Litepie datepicker for tailwind 2 still runs in production, which shows different css depending on screen size. Locally with litepie datepicker for tailwind 3 these media queries are not found.