cannot use CSS variables

[aweary]

What version of @tailwindcss/jit are you using?

0.1.3

What version of Node.js are you using?

12.20.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=4e7iksx-Zig

I'd expect that:

<div className="p-[var(--app-padding)]" />

would generate something like

.p-[var(--app-padding)] {
  padding: var(--app-padding);
}

but seems like it just does nothing

[daronspence]

@aweary I ran into a similar issue, but with the clamp() function.

In your case however, is there a reason you aren't using your variable directly in your tailwind config instead? The bracket syntax is supposed to be for one-off things, but your variable name suggests otherwise.

I'm not the cops though 😉

[aweary]

In your case however, is there a reason you aren't using your variable directly in your tailwind config instead? The bracket syntax is supposed to be for one-off things, but your variable name suggests otherwise.

@daronspence a CSS variable can still be useful for one-off use cases, a better example might be something like bg-[var(--animated-background)] where the animated-background variable is controlled by JavaScript.

The brackets syntax says it's for "arbitrary values" so arbitrary would imply any value at all. It should really just make sure it parses according to the CSS grammar and pipe it through.

[adamwathan]

@aweary Thanks for raising this! Right now the arbitrary value support is pretty curated, so each utility may or may not support it and may only support certain formats. I started really conservative with it because it's easy to loosen the restrictions.

For padding I see no reason to not just allow any value at all, so we can definitely update this. In other cases we have to be more careful about supporting any value or we might "hit" the wrong utility plugin, like bg-[var(--some-var)] — is that a background image, a background color, a background position, etc. Tough one because our API is sort of deliberately ambiguous in order to be terse, but it means we have to be careful now when adding features like this.

Again for padding though this is totally doable, there are no naming collisions or anything there so I'll update this one!

[adamwathan]

Should be good now in v0.1.4 👍🏻