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:
-
Inspect the component in your browser's developer tools to see where exactly the inline-grid class is being applied.
-
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.
-
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"
/>
south laurel
eternal plover