[bug]: ToggleGroup outline + spacing=0 renders separated items in Tailwind v4 #10717

Describe the bug

When using <ToggleGroup variant="outline" spacing={0}> with Tailwind v4,
the items render as fully-separated rounded buttons instead of a segmented
control.

The conditional utilities defined inside ToggleGroupItem -
group-data-[spacing=0]/toggle-group:rounded-none,
...:first:rounded-l-md, ...:last:rounded-r-md,
...:data-[variant=outline]:border-l-0 and friends - do not win over
rounded-md coming from toggleVariants base. Result: every item shows
all four corners rounded, both inner borders are visible, and a visible
gap appears between items even when spacing={0}.

Two probable root causes:

1. CSS source order. The conditional utilities and rounded-md end up in
   the same Tailwind layer with equal specificity, but rounded-md is
   emitted AFTER the conditional class, so it wins at runtime even though
   the conditional class is the intended override for spacing=0.

2. gap-[--spacing(var(--gap))] on the group root. Tailwind v4 does not
   appear to resolve the --spacing() function inside arbitrary value
   brackets when its argument comes from a CSS custom property
   (var(--gap)). The declaration ends up either invalid or falling back
   to a non-zero value, producing a visible gap between items.

I do not intend to submit a PR for this issue at the moment - happy to
provide the minimal repro and further diagnostics if needed.

Affected component/components

ToggleGroup

How to reproduce

1. Fresh Next.js 16 + React 19 + Tailwind v4 project (shadcn registry
   new-york-v4).

2. Install ToggleGroup via the CLI:

   npx shadcn@latest add toggle-group

3. Use the component with variant="outline" and explicit spacing={0}:

   import {
     ToggleGroup,
     ToggleGroupItem,
   } from "@/components/ui/toggle-group";
   
   export default function Demo() {
     return (
       <ToggleGroup
         type="single"
         variant="outline"
         spacing={0}
         defaultValue="a"
       >
         <ToggleGroupItem value="a">A</ToggleGroupItem>
         <ToggleGroupItem value="b">B</ToggleGroupItem>
         <ToggleGroupItem value="c">C</ToggleGroupItem>
       </ToggleGroup>
     );
   }

4. Render the page. Expected: segmented control, outer corners rounded,
   inner corners square, single shared border between items, no gap.
   Observed: every item rendered as a standalone rounded outlined button
   with a visible gap between items.

5. Workaround that does render correctly (forces the segmented look via
   inline styles, bypassing cn / tw-merge / Tailwind source order):

   <ToggleGroupItem
     value="a"
     style={{
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
     }}
   >
     A
   </ToggleGroupItem>
   <ToggleGroupItem
     value="b"
     style={{
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       borderLeftWidth: 0,
     }}
   >
     B
   </ToggleGroupItem>

Codesandbox/StackBlitz link

No response

Logs

System Info

- shadcn-ui registry: `new-york-v4` (synced ~May 2026)
- tailwindcss: 4.x
- next: 16.x
- react: 19.x
- radix-ui ToggleGroup primitive (imported from the `radix-ui` umbrella)
- node: 20.x / 22.x
- OS: macOS 26.5
- Browsers tested: Chrome (latest), Safari (latest)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues