Support using variables as arbitrary values without var()

[adamwathan]

This PR makes it possible to use CSS variables as arbitrary values without having to wrap them in var(...) for terser code. Since any arbitrary value starting with -- is unambiguously a CSS variable, we can know with certainty that the user isn't trying to do anything else so I can't find any reason that this isn't safe to do.

<!-- Before -->
<div class="w-[var(--width-var)] bg-[var(--color-var)] text-[length:var(--size-var)]">

<!-- After -->
<div class="w-[--width-var] bg-[--color-var] text-[length:--size-var]">

As you can see in the example above, this works with type-hints as well for when you need to tell Tailwind which utility you are trying to invoke explicitly.

Need to prepare documentation before merging.

[adamwathan]

Documentation PR here: tailwindlabs/tailwindcss.com#1437

[xfq]

I might be missing something, but it looks like "any arbitrary value starting with -- is unambiguously a CSS variable" is not entirely true? For example, it can be a color profile.

[tomblanchard]

I might be missing something, but it looks like "any arbitrary value starting with -- is unambiguously a CSS variable" is not entirely true? For example, it can be a color profile.

More reading about this here as there's more CSS features which use --:

https://developer.mozilla.org/en-US/docs/Web/CSS/dashed-ident

[karimhossenbux]

Sick! How to apply bg-opacity along with those --var? I can't them to work with bg-opacity-* or bg-[--varname]/*

[hugentobler]

Dashed ident is also used for scroll-timeline-name
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name