[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