Tailwind CSS in Nuxt project trying to use SCSS variable throws "Unknown word" error

I'm using Tailwind CSS in my Nuxt JS project and need to create a simple scss file with some variables that are then used in the :root selector to generate some theme colours. I've created my variables, and then have included them inside of my tailwind.scss file inside of assets/scss

The issue I'm facing is that PostCSS thinks that there's an error with my variable defined in this selector and throws the following error:

postcss-custom-properties: Unknown word

To me, this isn't an error as I'm working in a SCSS file which supports variables, what am I missing here?

assets/scss/tailwind.scss

@import '../../brand-theme';

/* In your CSS */
:root {
  --color-primary: $primary;
  --color-primary-darken: $primary;
  --color-secondary: $secondary;
}

@import './layout/base';
@import './vendors/hooper';

**brand-theme.scss (in root of my project) **

$primary:    238, 121, 61;
$secondary:  146, 74, 139;