Is it possible to get dots working in the variable names?

[sebpowell]

Versions:

• Package Version: 2.3.0
• Tailwindcss Version: 3.1.6

Question:

I'm trying to generate a variable name called --sizes-3.5 (and others like it – e.g. --sizes-0.5). Here's what I've tried:

{
      "0.5": "2px",
      "3.5": "14px",
}

The output however, ignores the '.' – so I just get:

--sizes-05, --sizes-35, etc.

I also tried escaping the dot, but no luck. Any ideas?

[mertasan]

Hi Sebastien,

The variable syntax does not contain dots. Feel free to let me know if you have a specific use case for this.

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

[mertasan]

[sebpowell]

Hey Mert,

Thanks for the quick response!

Ok, I see – the use case was wanting to mimick the classes that Tailwind generates (that includes half sizes – e.g. .p-0.5).

Prior to finding your plugin, I was generating all these variables myself, and I was able to get this working by escaping the '.' like so: --sizes-0\.5 (I believe TW do this as well to generate their classes). See attached screenshot – this works fine.

I actually tried generating them this way using your plugin, but found that the period simply gets ignored altogether.

It's not a 'must-have' as I can find a way round it (I can simply write these variables manually somewhere), but thought it might make sense to add this in given that TW supports this with their classes.

[mertasan]

Thanks for explaining. This is very logical! Please wait for the next release.

[sebpowell]

@mertasan brilliant, thank you! Looking forward to it, let me know if you need any further input.

[mertasan]

@sebpowell

Please upgrade the plugin to ^2.5.0 🎉

[mertasan]

https://github.com/mertasan/tailwindcss-variables/blob/master/examples/simple/clean.css

[sebpowell]

@mertasan brilliant, thank you for getting that sorted so quickly! I'll give it a go tomorrow.