How to reference Tailwind variable in regular SCSS ?

[kissu]

Hi ! 👋🏻
I do have a SCSS file containing

* {
  scrollbar-color: var(--color-primary-300) var(--color-primary-700);
  scrollbar-width: 8px; // btw, this property is not supported by Firefox, but it's an example ! 😆 
}

and this in my tailwind.config.js file

spacing: {
  ...
  2: '0.5rem'
  ...
},

How may I bring the spacing of 0.5rem into my scrollbar-width property to avoid that hardcoded 8px value ? 🙏🏻

[florianbouvot]

@kissu like this:

* {
 scrollbar-width: theme('spacing.2');
}

But look at this for more info: https://tailwindcss.com/docs/using-with-preprocessors

[kissu]

Haha, I knew I saw it somewhere once !
Thank you very much @florianbouvot ! ❤️