Now Tailwind supports CSS custom properties as arbitrary values since v3.0.
:root {
--text-color: red;
--text-size: 5rem;
}<script src="https://cdn.tailwindcss.com"></script>
<span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
Hello world!
</span>