\n```\n\ninstead of\n\n```vue\n// Current workaround\n\u003CUTable\n :meta=\"{ class: {\n tr: row => (row.getCanSelect()\n ? 'cursor-pointer'\n : 'data-[selectable=true]:!bg-accented data-[selectable=true]:hover:!bg-accented'),\n } }\"\n/>\n\n```\n\nI understand the need to have some sensible defaults, but I propose changing this to\n\n```html\n\u003Ctr :data-selectable=\"!!props.rowSelectionOptions?.enableRowSelection \n ? row.getCanSelect() : !!props.onSelect || !!props.onHover || !!props.onContextmenu\">\n```\n\np.s. Many thanks for all this beautiful work you have done so far.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3145,3148,3151],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"triage","ffffff",{"name":3152,"color":3153},"v4","49DCB8",4968,"nuxt","ui","open","UTable row data-selectable attribute not aligned with TanStack API","2025-09-14T00:46:37Z","https://github.com/nuxt/ui/issues/4968",0.69174606,{"description":3163,"labels":3164,"number":3170,"owner":3155,"repository":3156,"state":3171,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### Description\n\nI am trying to add style to a specific row in a UTable. So far I am trying something like this: \n\n```\n\u003CUTable\n :ui=\"{\n tbody: [\n tr.id === '1001' ? ' ' : 'light:bg-[#000] dark:bg-[#000] font-bold',\n ],\n }\"\n\u003C/UTable>\n```\n\nI am using the `:ui` prop as the docs say: \n\n```\n{ root?: ClassNameValue; base?: ClassNameValue; caption?: ClassNameValue; thead?: ClassNameValue; tbody?: ClassNameValue; ... 4 more ...; loading?: ClassNameValue; }\n```\n(Taken from: https://ui.nuxt.com/components/table)\n\nHowever, the docs don't say how to add a condition. I tried this: ` tr.id === '1001' ?` as well as hundreds of other possibilities because I am trying without knowing. It is not working, I suppose because I am not using the correct syntax.\n\nCould you provide more info as what options I have with the UTable to achieve this? Thank you in advance.\n\n",[3165,3168],{"name":3166,"color":3167},"question","d876e3",{"name":3169,"color":3153},"v3",4089,"closed","How to add style to a specific row in a UTable?","2025-05-08T11:59:49Z","https://github.com/nuxt/ui/issues/4089",0.68423444,{"description":3177,"labels":3178,"number":3182,"owner":3155,"repository":3183,"state":3171,"title":3184,"updated_at":3185,"url":3186,"score":3187},"As a follow-up of nuxt/test-utils#612 , if I don't try to change the environment and make a new file in `~/test/x.nuxt.test.ts` (where x can be any name) and run the vitest command (\"test\":\"vitest\" in the scripts section of my `package.json`) I get the following error:\r\n\r\n#### TypeError: Environment \"nuxt\" is not a valid environment. Path \"project/node_modules/vitest-environment-nuxt/dist/index.mjs\" should export default object with a \"transformMode\" method equal to \"ssr\" or \"web\".",[3179],{"name":3180,"color":3181},"vitest-environment","b60205",619,"test-utils","Nuxt vitest environment not found","2023-12-02T17:18:50Z","https://github.com/nuxt/test-utils/issues/619",0.68512326,{"description":3189,"labels":3190,"number":3192,"owner":3155,"repository":3156,"state":3171,"title":3193,"updated_at":3194,"url":3195,"score":3196},"Related #196 \n\n| Alias | Name | Version |\n| ----- | ------------------------------------------- | --------------- |\n| ui | [nuxt/ui][nuxt-ui-href] | v3.0.0-alpha.10 |\n| tw | [tailwindcss][tailwindcss-href] | v4.0.0-beta.8 |\n| tv | [tailwind-variants][tailwind-variants-href] | v0.3.0 |\n| tm | [tailwind-merge][tailwind-merge-href] | v2.6.0 |\n| uno | [unocss][unocss-href] | v0.65.3 |\n\n**ui internally uses tv to flexibly generate component class names. tv internally uses tm to merge classes with the same effect (e.g., `p-2 p-4` --> `p-4`), and finally uses tw to recognize class names and generate style classes.**\n\n**After examining tv and tm, it became apparent that they don't strongly depend on tw, which opens up the possibility of replacing the final style generation step with uno.**\n\n\u003Cdetails>\n\u003Csummary>## tw Prefix Attempt (Optional)\u003C/summary>\n\nInitially, the idea was to limit tw to ui internals and uno for user usage. With tw's [prefix][tw-prefix-href] feature, the class rules became simpler. **However, ui internally (v3.0.0-alpha.10) doesn't yet support passing tw prefix configuration**, so let's first make ui support tw prefixes.\n\n### Understanding tv Variants\n\nTo add prefixes, we need to analyze the data structure that tv accepts.\n\n#### Regular Variants\n\n```ts\n import { tv } from 'tailwind-variants';\n\n tv({\n variants: {\n foo: {\n foo_val: 'px-2', // or ['pxx-2', ...], be the same, class / className\n },\n }\n })({ foo: 'foo_val' })\n```\n\n#### Boolean Variants (Including true/false keys)\n\n```ts\n tv({\n variants: {\n foo: {\n true: 'px-2',\n false: 'py-2',\n }\n }\n })({ foo: true, })\n```\n\n#### Compound Variants (Intersection between variants)\n\n```ts\n tv({\n variants: {\n foo: {\n foo_val: 'px-2',\n foo_val2: 'px-2',\n },\n bar: {\n true: 'px-2',\n false: 'py-2',\n },\n },\n compoundVariants: [\n {\n foo: 'foo_val', // or ['foo_val', 'foo_val2', ]\n bar: true,\n class: 'text-white', // You can also use \"className\" as the key\n }\n ],\n })({ foo: true, })\n```\n\n#### Responsive Variants (Device screen sizes)\n\n```ts\n tv({\n variants: {\n foo: {\n foo_val: 'px-2',\n foo_val2: 'px-4',\n },\n }\n },\n {\n responsiveVariants: ['sm', 'md'] // or `true` for all\n })({ \n foo: {\n initial: 'foo_val',\n sm: 'foo_val',\n md: 'foo_val2',\n }\n })\n```\n\n#### Slot Variants (Combining above variants with slots)\n\n```ts\n tv({\n slots: {\n slot_a: 'mx-2',\n slot_b: 'mx-2',\n },\n compoundSlots: [\n {\n slots: ['slot_a', 'slot_b', ], \n class: '',\n foo: 'foo_val', // for all slot while variant is missing\n },\n ],\n variants: {\n foo: {\n foo_val: {\n slot_a: 'px-2',\n }\n },\n bar: {\n true: {\n slot_a: 'mx-2'\n },\n false: {\n slot_a: 'mx-0'\n },\n },\n },\n compoundVariants: [\n {\n foo: 'foo_val',\n bar: true,\n class: {\n slot_a: '',\n }\n }\n ],\n {\n responsiveVariants: ['sm', 'md'] // or `true` for all\n }\n })({ \n foo: {\n initial: 'foo_val',\n sm: 'foo_val',\n md: 'foo_val2',\n }\n }) // --> { foo_slot, bar_slot, }\n```\n\n### Summary\n\nAfter adding prefix functionality locally (#3009 ) and configuring tw prefix (while installing uno to handle non-prefix classes in the playground for page styling), **practical usage revealed some unavoidable conflicts, such as at-rule usage. Additionally, this approach doesn't effectively prevent files from being processed twice (by both tw & uno)**. Therefore, let's try a different approach: remove tw completely and use UnoCSS for everything!\n\n\u003C/details>\n\n## Modifying ui\n\n### Disabling tw Plugin\n\nRemove `@tailwindcss/vite` installation handling from ui internals.\nRemove tw imports and specific configurations from ui playground.\n\n### Introducing uno\n\nFor [nuxt](https://unocss.dev/integrations/nuxt) | [vite](https://unocss.dev/integrations/vite)\n\nAlso, [Style Reset](https://unocss.dev/guide/style-reset) can be applied as needed.\n\n**IMPORTANT: Include @nuxt/ui files**\n\n```ts\nexport default defineConfig({\n presets: [\n presetUno(),\n ],\n content: {\n pipeline: {\n include: [\n // the default\n /\\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\\?)/,\n // IMPORTANT include @nuxt/ui files\n /\\.nuxt\\/ui\\//,\n ]\n }\n }\n})\n```\n\n## Primitive Variables\n\nuno doesn't generate primitive variables like tw does (e.g., `--color-green-500`, `--text-lg`, `--radius-md`, etc.), but ui internally needs these variables.\n\n**For now, we'll directly copy the primitive variables from tw's normal loaded to local.**\n\n## Rule Inconsistencies\n\n**There are must more undiscovered issues**\n\n### Ring\n\nIn uno, the default `ring` width is 3px, different from tw's 1px.\n\n**Solution:**\n\n```ts\n shortcuts: {\n ring: 'ring-1'\n },\n```\n\n### Color Opacity\n\ntw internally uses [color-mix](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value/color-mix), allowing direct opacity settings for color variables.\nCurrently, uno doesn't support this directly.\n\ntw: `class=\"bg-[var(--color-primary)]/20\"` ✓\nuno: `class=\"bg-[var(--color-primary)]/20\"` ✕\nuno: `class=\"bg-[rgb(255,5,5)]/20\"` ✓\n\n```css\n:root {\n --color-primary: rgb(255, 5, 5);\n}\n```\n\nAfter observing ui usage, uno rules were added:\n\nuno: `class=\"bg-[var(--ui-primaey)]/20\"` ✓\nuno: `class=\"hover:bg-[var(--ui-primaey)]/75\"` ✓\n\n**Solution:**\n\n```ts\n rules: [\n [/(?:([^:\\s]+):)?bg-.*?\\[(var\\(--[^-]+-[^)]+\\))\\]\\/(\\d+)/, function* ([, modifier, color, alpha], { symbols }) {\n yield {\n background: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n if (modifier) {\n yield {\n [symbols.selector]: selector => `${selector}:${modifier}`,\n background: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n }\n }],\n [/(?:([^:\\s]+):)?text-.*?\\[(var\\(--[^-]+-[^)]+\\))\\]\\/(\\d+)/, function* ([, modifier, color, alpha], { symbols }) {\n yield {\n color: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n if (modifier) {\n yield {\n [symbols.selector]: selector => `${selector}:${modifier}`,\n color: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n }\n }]\n ],\n```\n\n---\n\nNow, let's run the playground! ~\n\n## Notes\n\n### tm's handling of tw and uno exclusive rules yields unexpected results\n\ntw doesn't directly support units (px, em, ...) like `text-Xpx`, requiring `text-[Xpx]` instead.\n\n- `text-md text-[20px]` --> `text-[20px]`\n- `text-md text-20px` --> `text-md text-20px`\n- `text-16px text-20px` --> `text-20px`\n- `text-[16px] text-[20px]` --> `text-[20px]`\n\n**When using ui, it's recommended to pass classes that tw can also parse.**\n\n[Commits · byronogis/ui](https://github.com/byronogis/ui/commits/test/use-unocss/)\n\n---\n\n\n[nuxt-ui-href]: https://ui3.nuxt.dev\n[tailwindcss-href]: https://tailwindcss.com/docs/v4-beta\n[tailwind-variants-href]: https://www.tailwind-variants.org/\n[tailwind-merge-href]: https://github.com/dcastil/tailwind-merge\n[unocss-href]: https://unocss.dev/\n[tw-prefix-href]: https://tailwindcss.com/docs/v4-beta#using-a-prefix\n",[3191],{"name":3166,"color":3167},3011,"[Attempt] Exploring the Coexistence of Nuxt UI v3 and UnoCSS","2025-05-10T19:47:10Z","https://github.com/nuxt/ui/issues/3011",0.6861932,{"labels":3198,"number":3205,"owner":3155,"repository":3155,"state":3171,"title":3206,"updated_at":3207,"url":3208,"score":3209},[3199,3202],{"name":3200,"color":3201},"3.x","29bc7f",{"name":3203,"color":3204},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.6926888,{"description":3211,"labels":3212,"number":3218,"owner":3155,"repository":3155,"state":3171,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@3.2.0\r\n- Builder: vite\r\n- User Config: alias, app, components, css, devtools, experimental, extends, i18n, modules, nitro, pinia, router, runtimeConfig, tailwindcss, telemetry, veeValidate, vite, vue\r\n- Runtime Modules: @pinia/nuxt@^0.4.11, @nuxtjs/stylelint-module@^5.1.0, @nuxtjs/i18n@8.0.0-beta.13, @vueuse/nuxt@10.2.1, @vee-validate/nuxt@^4.9.6, @nuxtjs/tailwindcss@^6.8.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\nI provide a minimal reproduction\r\n\r\nhttps://stackblitz.com/edit/github-brcyvh?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI'm using a plugin `$bp` that use `useBreakpoints` from `vueuse` under the hood https://vueuse.org/core/useBreakpoints\r\n\r\nMy goal is to change the `size` of the component `NButton` based on a boolean : `$bp.isLapM`.\r\n\r\nWhen we refresh the page, we see that the `btnSize` inside the button is updated but the class still `-sm`.\r\nIf I resize my window, both are updated\r\n\r\nWe are migrating our app to Nuxt 3, and on Nuxt 2 we didn't have this issue... :cry: \r\n\r\nI'm a doing something wrong about this ? \r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3213,3214,3215],{"name":3200,"color":3201},{"name":3203,"color":3204},{"name":3216,"color":3217},"upstream","E8A36D",22722,"class / style attribute does not update on node mismatch","2023-08-23T10:38:59Z","https://github.com/nuxt/nuxt/issues/22722",0.7002768,{"description":3224,"labels":3225,"number":3233,"owner":3155,"repository":3156,"state":3171,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.6.1\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-rzyn6r?file=assets%2Fcss%2Ftailwind.css\n\n### Description\n\nI tried to use `@apply` in `\u003Cstyle>` block in my vue files. But I got the error that my class does not exists.\r\n```\r\n[vite-node] [plugin:vite:css] [CssSyntaxError] ./app.vue:9:2 : The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.\r\n```\r\nI also tested it without `@nuxt/ui` module but only `@nuxtjs/tailwindcss` module, which works perfectly fine.\r\nI looked for config in nuxt UI document, but didn't find anything that could help fixing this.\n\n### Additional context\n\nHere's one reproduction with only `@nuxtjs/tailwindcss` installed\r\nhttps://stackblitz.com/edit/nuxt-ui-eadnqo?file=nuxt.config.ts\n\n### Logs\n\n_No response_",[3226,3227,3228,3231],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3229,"color":3230},"closed-by-bot","ededed",{"name":3232,"color":3230},"stale",2099,"custom tailwind style in `@layer` directive cannot be used within `\u003Cstyle>` block","2025-06-18T09:06:17Z","https://github.com/nuxt/ui/issues/2099",0.70154506,{"description":3239,"labels":3240,"number":3246,"owner":3155,"repository":3155,"state":3171,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\nnode: v16.15.1\r\nnuxt: ^3.2.0\r\ntailwindcss: ^6.2.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ky7itr\n\n### Describe the bug\n\nHello team,I want to use the style of tailwindcss: https://tailwindcss.com/docs/gradient-color-stops\r\n\r\nso I wrote this:\r\n\r\nresult:\r\n\r\nIt's right,now I use dynamic class:\r\n\r\nreuslt:\r\n\r\n\r\nIt can be seen from the console that the style is indeed written into the class,so what did I wrong?If you can see right style,please \r\nrestart the project,thanks.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3241,3242,3243],{"name":3200,"color":3201},{"name":3203,"color":3204},{"name":3244,"color":3245},"⛔️ can be closed","484893",19013,"Nuxt3 cannot use tailwindcss in dynamic class","2023-02-14T08:39:44Z","https://github.com/nuxt/nuxt/issues/19013",0.7019337,{"description":3252,"labels":3253,"number":3257,"owner":3155,"repository":3156,"state":3171,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[3254],{"name":3255,"color":3256},"enhancement","a2eeef",2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7035719,{"description":3263,"labels":3264,"number":3266,"owner":3155,"repository":3156,"state":3171,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\ni add the default table but have another styling.\nhow can i fix this? \n\n` \u003CUTable\n v-model:expand=\"expand\"\n class=\"w-full\"\n :loading-state=\"{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }\"\n :progress=\"{ color: 'primary', animation: 'carousel' }\"\n :rows=\"people\"\n :columns=\"columns\"\n >`\n\n",[3265],{"name":3166,"color":3167},2667,"I have no styling at the default UTable","2024-11-17T11:13:44Z","https://github.com/nuxt/ui/issues/2667",0.70772034,["Reactive",3272],{},["Set"],["ShallowReactive",3275],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0KcwdSDxbnwC-c7BaJ2B8hnjS1Ga8uFpyVHaemni670":-1},"/nuxt/ui/4475"]