Tailwind css - use className custom spacing value as variable for tailwind config

Question

Is there a way to pass custom value for spacing (or other parameters) to tailwind config schema instead of prescribing all the values i need in tailwind config?

For example, when using custom spacing values in px for HTML element like this:

<div className="mt-15px pb-36px h-500px></div>

I currently use next tailwind config:

    ...
    spacing: {
            "15px": "15px",
            "36px": "36px",
    },
    height: {
            "500px": "500px"
        }
    ...

Instead i'd like to have something like this if it is possible:

 ...
    spacing: {
            "${var}px": "${var}px",
    },
    height: {
            "${var}px": "${var}px"
        }
    ...

Basically to pass any number to tailwind styles for spacing or other similar parameters without the necessity to prescribe it into config.

Is there any way to achieve it?

Answer 1

It is easy with new JIT mode, using feature called arbitrary value.

https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">

No need to predefine this in config. You can stick with standard spacing based on Rem, and use arbitrary values only for special cases (for ex. when pixel perfect is needed).