Tailwind SCSS with variables.scss

Question

I am practising tailwind scss, and trying to create a theme similar to bootstrap. My current code for primary button, below which is working fine.

.btn-{
    &primary{
        @apply bg-blue-500 text-white;
        &:disabled{
            @apply bg-blue-500/50;
        }
    }

and my alert is

.alert-{
    &primary{
        @apply bg-blue-500 text-white;
    }

As bg-blue-500 is taken as primary color, i prefer to variable.scss file like

$bg-primary: @apply bg-blue-500; //throws error at scss

I dont want to hardcode the color, instead use the tailwind values. Is there a way to achieve this

Answer 1

Since this question was posted 10 months ago I gues this not urgent anymore but maybe this helps someone else:

For that purpose you can use the theme function provided by tailwind for that purpose:

$myVar: theme(colors.blue.500)

Resource: https://tailwindcss.com/docs/functions-and-directives (at the very bottom)