How can I ensure that my sidebar's min-height fills the available space in nuxt and tailwindcss? The __nuxt element seems to be causing some issues. Any suggestions on how to work around this?
This is my layout file... main.vue
<template>
<nav-bar />
<slot />
</template>
<script setup lang="ts">
useHead({
htmlAttrs: {
class: "h-full bg-gray-50",
},
bodyAttrs: {
class: "h-full",
},
});
</script>
index.vue
<template>
<div class="bg-red-100 m-h-full">
<div v-for="index in 10" v-bind:key="index">
here
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "main",
});
</script>
The issue I'm facing is that the red background does not extend to fill the height as shown in the screenshot.