3

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;

enter image description here

kissu
  • 40,416
  • 14
  • 65
  • 133
Ryan H
  • 2,620
  • 4
  • 37
  • 109

1 Answers1

4

In the :root scope, you need to interpolate the variable as shown in my previous answer here: https://stackoverflow.com/a/68986443/8816585

Like this

--color-primary: #{$primary};
kissu
  • 40,416
  • 14
  • 65
  • 133