Add support for overriding variables with css utilities

[stijns96]

It is already possible to use at-rules like @media or @supports in arbitrary variants.

<div class="flex [@supports(display:grid)]:grid">
  <!-- ... -->
</div>

And you can also already override variables with hardcoded values.

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>

But it would be very helpful if we could use tailwind values (config) instead.

Here some proposals:

<div class="[--background-color:theme(colors.blue.DEFAULT)]">
  <!-- ... -->
</div>

<div class="[--background-color]-[theme(colors.blue.DEFAULT)]">
  <!-- ... -->
</div>

<div class="[--background-color]:[theme(colors.blue.DEFAULT)]">
  <!-- ... -->
</div>

<div class="[--background-color]-blue">
  <!-- ... -->
</div>

I do understand that some of the proposals are probably not even possible, but I still wanted to list them down for some inspiration.

[wongjn]

Both

<div class="[--background-color:theme(colors.blue.DEFAULT)]">
  <!-- ... -->
</div>

And

<div class="[--background-color:theme('colors.blue.DEFAULT')]">
  <!-- ... -->
</div>

Should already work, as evidenced in this Tailwind Play.

[stijns96]

Thanks! I'll update my colleagues about it.