\n\nThese are my styles... at first I thought \"peer\" might help, but the button is wrapped in a div so it doesn't work...\n\n```html\n\u003CURadioGroup\n :items=\"option.options\"\n orientation=\"horizontal\"\n :ui=\"{\n root: 'relative',\n fieldset: 'inline-flex flex-row gap-0 border border-gray-200',\n item: 'item relative text-md border-r border-gray-200 last:border-r-0',\n base: 'base peer absolute inset-0 size-auto rounded-none ring-0 ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2',\n indicator:\n 'indicator flex items-center justify-center size-full rounded-none after:bg-transparent after:rounded-full',\n container: 'container block absolute inset-0 h-auto',\n wrapper: 'wrapper relative ms-auto me-auto ',\n label:\n 'label p-2 block font-medium text-[var(--ui-text)] peer-aria-checked:text-white',\n }\"\n >\n```\n\nAny ideas if there could be solutions with tw 4.0 that I don't know about? Or do I need to wrap this as a component and just use some logic to set the text colour of the label?\n\nmerry christmas,\ngregor ;)",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",2954,"ui","Radiogroup styled as togglebuttongroup","2024-12-25T11:09:53Z","https://github.com/nuxt/ui/issues/2954",0.7954617,["Reactive",3150],{},["Set"],["ShallowReactive",3153],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnu8kSr0ICuKEJAj7-LpLbha8ge0ArbvaXi6mElLSm9o":-1},"/nuxt/nuxt.com/992"]