Is there any risk associated placing --radius to be defined under @theme block?

[heecheon92]

@theme inline {
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
...

Let's say I have a globals.css like above.

What I realized is that tailwindcss intellisense does not respect --radius under ":root".

If I move it over to theme block like below

@theme inline {
  --radius: 0.5rem;
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
...

The intellisense seems to provide correct canonical suggestion.

Now I am wondering if doing such is a safe move.

I am not a tailwind or css related expert so if anyone can provide an advice, it would be appreciated.

[Om-singh-ui]

Yes it is safe to define --radius inside the @theme block.

The @theme layer in Tailwind (v4 / new design tokens system) is actually the recommended place for design tokens like radius, spacing, colors, etc. Moving it there does not change runtime CSS behavior it mainly improves:

→ Tailwind IntelliSense support
→ Token consistency across utilities
→ Better integration with Tailwind’s design system
→ Predictable build-time resolution

Things to keep in mind:

→ If you need the variable globally outside Tailwind utilities, you can still define a fallback in :root.
→ Avoid defining the same token in multiple places to prevent confusion.
→ This change is mostly DX (developer experience) improvement, not a functional risk.

So in short:
Moving --radius into @theme is safe and aligned with Tailwind’s intended usage.

[TMHSDigital]

To add to the above, one important nuance specific to the inline modifier:

Moving --radius into @theme inline (vs plain @theme) has a behavioral difference worth knowing. The inline keyword tells Tailwind not to emit a CSS custom property, it inlines the value directly
into generated utility CSS instead. This means:

• var(--radius) will no longer work in your own handwritten CSS at runtime. The variable doesn't exist in the browser
• The calc expressions like calc(var(--radius) + 12px) get resolved to static values at build time, so changing --radius via JavaScript or a dark mode override won't cascade to those derived values

If you only use --radius through Tailwind utility classes, this is fine. But if you reference var(--radius) anywhere in custom CSS, consider using @theme without inline:

@theme {
  --radius: 0.5rem;
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

This still fixes IntelliSense, keeps the variable available at runtime, and lets dynamic overrides work correctly.