Yet another CSS vars request... but with JIT

[robclancy]

But with the JIT compiler.

So if Tailwind detects var(--colors-red-500) it will create that var just like it would create the class if detected.

---

Incase someone gets here wanting to be able to use vars, here is our current solution to expose the above var. And our use case is inline styles to set a border red based on a dynamic render time selector.

  plugins: [
    ...,
    plugin(function({ addUtilities, config }) {
      const colors = [
        'red.500',
      ];

      const vars = {};

      for (const color of colors) {
        vars[`--colors-${color.replace('.', '-')}`] = config(`theme.colors.${color}`);
      }

      addUtilities({
        ':root': vars,
      });
    }),
  ],

[adamwathan]

Hey! What do you mean by “if Tailwind detects var(--colors-red-500)”, do you mean detecting it in the HTML? Not sure exactly what you’re asking for.

[robclancy]

The same way it detects current things with the JIT version. So if it scanned whatever is configured, like the HTML or CSS. It would include them. If it matched the same format as the tailwind config.

I was going to write an example, but really this is such an edge case usage it's really not worth it.

[robclancy]

Incase someone stumbles on this thread...

Just spotted this. https://twitter.com/argyleink/status/1447637157649141761

Combined with just adding something like all tailwind colours with a script into this would basically do what I was saying.