[v4] --radius-full is not available as a variable

[BeetrootShoulders]

What version of Tailwind CSS are you using?

4 beta.2

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play

What version of Node.js are you using?

N/A

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/bpvuR7VY5Z

Describe your issue

--radius-full does not appear to be available as a variable. As an obviously pointless examplerounded-(--radius-lg) will result in an element with rounded corners, rounded-(--radius-full) will not.

[adamwathan]

Hey! This is by design in v4 as "full" only really has one meaning so we've hard-coded values like that into core instead of making them driven by variables (it wouldn't make sense to redefine --radius-full to mean something else).

But maybe in this case it's still useful to have in there since it's a somewhat complex value to type out by hand (calc(infinity * 1px)), will leave this open until I have a chance to think about it!

[philipp-spiess]

@BeetrootShoulders Out of curiosity: Do you mind sharing the more specific case you were running into that lead you to notice this variable not being defined? 🙂

[tobimori]

I've noticed this as well, since I've tried to avoid @apply more and more and result to theme() or now var(). I agree there's no need in theory, but it's just consistency when writing CSS without utilities.

Related: https://discord.com/channels/486935104384532500/486935104384532502/1299322215094816870

[BeetrootShoulders]

@BeetrootShoulders Out of curiosity: Do you mind sharing the more specific case you were running into that lead you to notice this variable not being defined? 🙂

I actually opened the issue on behalf of a user on the TW Discord (where I try to help out as best I can): https://discord.com/channels/486935104384532500/486935104384532502/1309559484255047721

[t0byman]

I would also like to use var(--radius-full) instead of @apply rounded-full

[sumansuhag]

HI, // tailwind.config.js (or default theme) module.exports = { theme: { borderRadius: { 'none': '0px', 'sm': '0.125rem', // 2px DEFAULT: '0.25rem', // 4px (for rounded) 'md': '0.375rem', // 6px 'lg': '0.5rem', // 8px 'xl': '0.75rem', // 12px '2xl': '1rem', // 16px '3xl': '1.5rem', // 24px 'full': '9999px', // This is the key in question }, // ... }, // ... }; There might be a specific exclusion or a bug in the v4 logic that generates CSS custom properties from the theme, which is causing the full key (or keys with non-alphanumeric characters, though full is fine) to be skipped or improperly handled for the borderRadius scale. It could also be an oversight given it's a beta version.

Good luck!

SUMAN SUHAG

[spacedRaven]

I'm running into this issue as well still, any progress on the solution?

[rozsazoltan]

The calc(infinity * 1px) itself is not declared as a full name. It's defined statically (!) in the engine: https://github.com/tailwindlabs/tailwindcss/blob/7779d3d080cae568c097e87b50e4a730f4f9592b/packages/tailwindcss/src/utilities.ts#L2128-L2131

I don't know exactly why the full expression was declared as static, but it would seem logical to include it by default in the --radius-* namespace. In the meantime, you can add it yourself:

Solution 1 - @theme

You can extend the --radius-* namespace:

• https://play.tailwindcss.com/1JNs1mlyWC?file=css

Since @utility does not override the default dynamic and static utilities, in this case with rounded-full a duplicate declaration ends up in the generated CSS:

Perhaps because of the duplication, this might not be the best approach after all.

Solution 2 - :root

Or you can just declare the variable globally in :root:

• https://play.tailwindcss.com/pwOqQcpleC

This way we don't extend the --radius-* namespace, and rounded-full won't be generated twice. However, thanks to :root, the variable will still be accessible if you need the variable name.

[philipp-spiess]

Hey folks! We just laded #18056 (coming in the next patch release) that will make solution 1 that @rozsazoltan presents even better by no longer generating the static utility. So all you need to do now is to add this to your Tailwind theme:

@theme {
  --radius-full: calc(infinity * 1 px);
}

And we'll emit the variable once you use rounded-full.