Custom CSS Variables in Spacing utilities

[richardshephard1]

We've got a React application that attempts to set spacing based on CSS Variables. An example of this:
https://play.tailwindcss.com/PIVKiGAgmx

The idea is that the application will apply style with the requested --carousel-slide-gap sizing.

The tailwind generator makes:

  .gap-carousel-slide {
    gap: var(--spacing-carousel-slide);
  }

And, --spacing-carousel-slide is:

--spacing-carousel-slide: var(--carousel-slide-gap);

in the theme ... however, gap doesn't seem to be able to reference this value, so setting the custom variable:

If I use the syntax gap-(--carousel-slide-gap) - this works, however, then I have to configure all the 2x versions into the html rather than having it in the theme to do it for me.

How would you be able to use custom variables with the spacing utilities?

[wongjn]

Use @theme inline: https://play.tailwindcss.com/s746N4pUgm?file=css

[richardshephard1]

Ah, thanks @wongjn 👍

I missed the doc link 😸 for those referencing the docs:
https://tailwindcss.com/docs/theme#referencing-other-variables