\n`\n\n### Additional context\n\n_No response_",[3219,3220],{"name":3196,"color":3197},{"name":3221,"color":3167},"wontfix-v2",2737,"Specify a components variant for each color mode.","2025-03-03T22:31:17Z","https://github.com/nuxt/ui/issues/2737",0.67017746,{"description":3228,"labels":3229,"number":3232,"owner":3139,"repository":3140,"state":3178,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Description\n\nBefore using `nuxt ui`, I briefly skimmed through the repository and found an already closed issue: [3018](https://github.com/nuxt/ui/issues/3018)\n\nThe error and solution mentioned in this issue (the [v2 documentation](https://ui.nuxt.com/getting-started/installation) indeed did not mention the solution) can actually be resolved by adding `tailwindcss@next` to the `peerDependencies` section in the `package.json` file.\n\nThis is because when [nuxi module add](https://github.com/nuxt/cli/blob/1afc06e8d08ea781fc5fede343de8d68865c2b4e/packages/nuxi/src/commands/module/add.ts#L134) installs a module, it not only installs the module itself but also scans the module package's `peerDependencies`.\n\nFor example, when using `nuxi module add pinia`, since `@pinia/nuxt` has `pinia` listed in its `peerDependencies` in the [package.json](https://github.com/vuejs/pinia/blob/3b21e08b6a068d18112b915b83f702fb5504ab73/packages/nuxt/package.json#L51C4-L51C20), both `@pinia/nuxt` and `pinia` will be automatically installed during the module installation.\n\nIf there are dependencies in `peerDependencies` that you do not want `nuxi module` to install automatically, you can use `peerDependenciesMeta` to ignore them, for [example](https://github.com/atinux/nuxt-auth-utils/blob/6b61b8888e3b3c6f60fd5ff767b7f0aa6cf09fc9/package.json#L57):\n\n```\n\"peerDependenciesMeta\": {\n \"pinia\": {\n \"optional\": true\n }\n },\n```\n\nTherefore, Nuxt UI can specify `tailwindcss@next` in the `peerDependencies` of `package.json`, ensuring Tailwind CSS is automatically installed when the Nuxt UI module is installed.\n\nThis solution applies to both v3 and v2.\n\n> PS: I noticed `typescript` in the `peerDependencies` of the v3 package.json. Is this a necessary dependency similar to `tailwindcss`? If not, after adding tailwindcss, perhaps `peerDependenciesMeta` could be used to ignore it.",[3230,3231],{"name":3133,"color":3134},{"name":3136,"color":3137},3349,"Add \"tailwindcss@next\" to the \"peerDependencies\" section in the package.json file.","2025-02-21T17:05:10Z","https://github.com/nuxt/ui/issues/3349",0.6761609,{"description":3238,"labels":3239,"number":3242,"owner":3139,"repository":3140,"state":3178,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nI've noticed that links (\\\u003Ca\\> tags) created with `UButton` contain a lot of unnecessary styling related to the button itself, disabled and enabled state. Given that for anchors there is no `disabled` property in the HTML specification, this means that out of the following styles:\n```\nrounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-primary)]/50 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]\n```\n\nAt the very least, these can be removed:\n\n```\ndisabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent\n```\n\nThis is quite a reduction in classes and can make a moderate difference in total page size and even web vitals scores, especially if there are a lot of links on the page created with `UButton` (which is very likely given the customization UButton provides with icons, variants, colors, and more)\n\nIn order to make this work, the classes that rely on disabled state would likely need to be extracted into a separate place in the theme, which tailwind-variants will then need to merge if there is no `to` property present.\n\nYou might be asking why, given that technically people can rely on it to prevent navigation until a certain condition. But the answer to that is that restricting links like that is generally bad practice and can be circumvented pretty easily. It's not meant to be a security feature and it also lacks in terms of functional purpose.\n\nI'll check to see what I can do about it, but I thought sharing it here would be more beneficial in case someone will be faster than me in preparing a PR for this =)",[3240,3241],{"name":3133,"color":3134},{"name":3136,"color":3137},2907,"[Performance improvement opportunity]: remove disabled-dependent classes on links created with `UButton`","2025-01-13T22:45:37Z","https://github.com/nuxt/ui/issues/2907",0.6787947,["Reactive",3248],{},["Set"],["ShallowReactive",3251],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLh8FxOHQ0e_mF1T09zycWiI2kzWuXsM1BuDXq3o-RMo":-1},"/nuxt/ui/3390"]