Nuxt•3d ago

Nuxt UI Tabs - strange behaviour

Hey, I am a bit lost here with using nuxt/ui tabs and I'm not sure how to continue the bug hunting. I have configured my tabs using the ui-prop with "strategy=override". So I assume that all the tailwind classes should come from my config object right? Still I have an additional class inline-grid where I have no idea where it comes from. I already searched the code and the github repos but I was not able to find it. vue and nuxt are latest version. Added a minimal setup here, reproducing the error: https://stackblitz.com/edit/nuxt-ui-95bkbymv?file=app.vue

2 Replies

kapa.ai•3d ago

Hi @Karl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can address your question about the Nuxt UI Tabs component and the unexpected inline-grid class. The behavior you're experiencing is likely related to how Nuxt UI handles class merging and overriding. While you've set the strategy to override in your ui prop, there are some base classes that might still be applied. According to the Nuxt UI Theming documentation (https://ui.nuxt.com/getting-started/theming#components), the ui prop is smartly merged with the default config using tailwind-merge (https://github.com/dcastil/tailwind-merge). This means that even with the override strategy, some base classes might still be applied. The inline-grid class you're seeing is not explicitly mentioned in the Tabs component documentation or the default configuration provided in the knowledge sources. It's possible that this class is being added by the component's internal logic or a parent component. To troubleshoot this issue, you can try the following: 1. Inspect the component in your browser's developer tools to see where exactly the inline-grid class is being applied. 2. Try using the class attribute in addition to the ui prop. As mentioned in the Nuxt UI Theming documentation (https://ui.nuxt.com/getting-started/theming#class-attribute), the class attribute is smartly merged with the ui prop and the config. 3. If you want to completely remove the inline-grid class, you might need to override it explicitly in your ui prop or class attribute. Here's an example of how you might try to override it:

<UTabs
  :items="items"
  :ui="{
    wrapper: 'flex',
    list: {
      base: 'flex',
    },
    strategy: 'override'
  }"
  class="block"
/>

<UTabs
  :items="items"
  :ui="{
    wrapper: 'flex',
    list: {
      base: 'flex',
    },
    strategy: 'override'
  }"
  class="block"
/>

If this doesn't solve the issue, it might be worth raising this as a potential bug or unexpected behavior with the Nuxt UI team on their GitHub repository. For a more detailed understanding of how the Tabs component works and its available customization options, you can refer to the Nuxt UI Tabs documentation (https://ui.nuxt.com/components/tabs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@672769571429548033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI Tabs - strange behaviour