Why is border radius hardcoded?

[Cigoler]

Have I messed up my installation, because my ui/Card for example has border-radius hardcoded so that it doesn't reflect the theming variable applied in globals.css. I'm assuming this isn't the intended practice, but just wondering if there's something I've mixed up in the installation or if this is a bug in the latest cli version?

[bryanprimus]

same here

bunx --bun shadcn@latest add card

looks like card doesn't respect --radius: 0rem; in globals.css, while other component like button does

[bryanprimus]

looking at the shadcn ui themes, when setting border radius to 0

the border radius for the card was set to border-radius: calc(var(--radius) + 4px); by inspecting the element using dev tool.

it was not registered in my tailwind.config.ts, not sure what step i'm missing.

basically i need to manually add

borderRadius: {
+   xl: "calc(var(--radius) + 4px);",
    lg: 'var(--radius)',
    md: 'calc(var(--radius) - 2px)',
    sm: 'calc(var(--radius) - 4px)'
}

[thejasonxie]

The reason why is because the <Card /> component has rounded-xl but tailwind.config.ts doesn't have xl radius defined. I opened a PR to fix