css variables to tailwindcss controlled by shopifys color

Got the change the color in shopifys UI to then create the colors as css variables so i can use them in tailwind
From tailwind.config.js get the designtokens eeem colors
(const colors = require("./tailwind/designToken-color");
module.exports = {
extend: {
colors: colors
}
}
designtoke-colors.js
module.exports = {
"primary-50": 'rgb(var(--color-primary-50) / <alpha-value>)',
}
Create a snippet in snippets/cssvariables.liquid
{% style %}
:root {
{% assign color_primary_50 = settings.color_primary | color_lighten: 45 %}
--color-primary-50: {{ color_primary_50.rgb }};
};
{% endstyle %}
Voila Ready to go
<div class="bg-primary-50 h-12 w-12"> BAM! </div>