using bootstrap 4 sass variables to create new css helper classes

Question

I'd like to create some color helper related classes, like in tailwind, where we can define elements colors with classes like text-red-400 or bg-gray-100.

It's this kind of helper classes that I would like to create with Bootstrap 4. I noticed that the necessary variables already exist in the _variables.scss file:

$blue-100: tint-color($blue, 8) !default;
...
$indigo-100: tint-color($indigo, 8) !default;
...
and so on...

The goal would be to use all these available variables to create my color helper classes for text, background and border.

The problem is that I'm pretty new to scss and webpack and I have no clue how to achieve this or if it is even possible.

Any help would be apreciated.

Thank you all.