Add support for css custom properties (variables)

[radislaw]

if I use these settings in the tailwind configuration:

primary: {
    DEFAULT: 'var(--primary)',
    light: 'var(--primary-light)',
},

they are not displayed on the viewer page. I see only white square

[botmaster]

Hello radislaw,
Maybe this thread could help: #11 (comment)

[2manoj1]

Have a look, How I did https://github.com/2manoj1/tailwind-default-config-viewer/blob/736b892120c919dbf4a9ed2a2115c9e4224ec510/tailwind.config.js#L5

https://github.com/2manoj1/tailwind-default-config-viewer/blob/main/utils/convert.js

Let me know, its work or not for you

[denishacquin]

Brilliant. Note: if you're using raw values like 210 20% 98% you'll need to wrap the mapped value with a color function in the script like so:

function getThemeReplacementsValues(filePath) {
  const rootVariablesMap = extractRootVariables(filePath);
  let tmpObj = {};
  for (const [k, v] of rootVariablesMap) {
    tmpObj = { ...tmpObj, [`var(${k})`]: `hsl(${v})` };
  }
  return tmpObj;
}