Opacity variants aren’t working

[sacarvy]

for reference,

<div class="flex flex-row place-items-start varcolor-rose">
        <button 
                type="submit" 
                class="inline-flex h-10 items-center justify-center rounded-md bg-varcolor-950/40 px-4 py-2 text-sm 
                             font-medium text-varcolor-50 ring-offset-white transition-colors 
                             hover:bg-varcolor-900 hover:bg-opacity-80 
                             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-varcolor-400 
                             focus-visible:ring-offset-2
        ">
               Primary
        </button>
</div>

https://play.tailwindcss.com/PrP1DFymp1?layout=preview