Auto-complete variable in input field

This is a similar request to using trem to convert pixels to REMs, but it’d be cool if typing:

–my-variable + Enter

In an input field automatically converted to:


1 Like

Hi @Sunny,
This is brilliant!

And I’m pretty sure we could even NOT type the -- in most inputs since they accept only numeric values. Even using units, first character will always be a digit, so it can be detected.

Give Kevin credit, I stole this idea from ACSS :slight_smile:

Continuing the discussion from

@Louis are you kidding me :astonished:

Hey there @sunny.

Thanks for your once again nice shortcut suggestion.
I’ve just tested it, and it works perfectly.

I’m wondering if the variable picker is still being considered.
The new (global) color system with the ability to set custom names and variables is hopefully just the beginning :slightly_smiling_face:

1 Like

From your imagination to reality in half a day! Hahaha :bulb:


Definitely the next logical step - assuming this will be connected with the TailWind, as @Louis was demoing autocompletion similar to this in a live a short while ago.

Hello @sunny,

Thanks for the suggestion!
We were planning to add this but never quite got round to it. Your post seemed to be the perfect time to push it forward.

The first implementation transformed the value into a variable without the need for --, although we decided this was too general.

We will be extending it to the other fields in the coming updates and working through removing number only fields to allow for more flexibility.

The variable picker is on the roadmap, but won’t be part of the same package as the Tailwind autocomplete.
As @Marius points out, the variable picker should follow the same logic as the colour system with globally tracked, customisable (in every way) variables.



Understood, thanks for clarifying. At the moment, each new feature seems to open the way to others, so I am just enjoying the journey.

1 Like

@Araminta, just highlighting another completed feature request that can be marked as done. :+1: