How to override Naive Menu css with tailwind css in VueJs?

My question is -
How can I override Naive UI Menu with tailwind css? Specifically, I need to extend the vertical menu divider to take up the whole web page height. Right now, its length is equal to how many menu items there are. I suspect I'd need to use Tailwind's max-h-full and have tried setting it the 3 places below in my code. However, none of it works and i'm not sure how to proceed.

    <div class="max-h-full">
      <n-space vertical>
      <n-layout has-sider>
        <div class="max-h-full">
          <n-layout-sider
            bordered
            collapse-mode="width"
            :collapsed-width="64"
            :width="240"
            show-trigger
            class="max-h-full"
          >
            <n-menu
              v-model:value="activeKey"
              :collapsed-width="64"
              :collapsed-icon-size="22"
              :options="menuOptions"
              @update-value="selectionHandler"
            />
          </n-layout-sider>
        </div>
        <n-layout>
          <DashboardBody/>
        </n-layout>
      </n-layout>
    </n-space>
    </div>

My Setup -
I am using the Naive UI Menu in my VueJS application. The code I am using in my application is identical to the Collapsed Menu Example. I also setup tailwind css and followed these vuejs tailwind setup steps. Everything seems to have been setup correctly because this code I have below resulted in purple text.

  <n-card class="text-purple-600">
    Card Content
  </n-card>
  </template>

Other Info
My tailwind.config.js file looks like -

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  purge: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: []
}

There are two ways to override, I don't know much of vue, but to override css of a pre-built component, you can find the class of that component and do this in the css file using tailwindcss.

Here is an example -

.your-button-class{
   @apply h-10 w-10 !important;
}

other way to override -

you can add ! before a tailwind class in your component, i.e - className="!h-10" <---- "!h-10" means "height: 2.5rem !important", this will override the css of a component

You can use this !important modifier by adding ! sign in your TailwindCSS classes at the start as i showed you above, but still i can give you more examples -

!text-3xl !bg-red-500 !text-green-600

Let me know if you still need some help.