Support for variables from: root

[afuno]

I noticed that now there is a problem if variables were declared, for example, in ':root'. Is there any solution for this problem now?

[rogden]

This is an interesting use case. The config viewer doesn't load your compiled CSS file so it wouldn't have access to your CSS variables by default. One possible solution: I could add support for overrides/customization of the config viewer from your Tailwind config file. Example:

// in your tailwind.config.js file
module.exports = {
  theme: {
    // ... your theme config
    configViewer: {
      cssColorVars: {
        'var(--color-black)': '#000000',
        'var(--color-white)': '#ffffff',
        // ...other colors vars
      }
    }
  }
}

What do you think? Also, are you using CSS vars for theming? If so, this would only solve for your default/::root color vars.

[rogden]

@afuno I added the ability to replace values from your theme when used in the config viewer. This should solve your issue with the CSS variables. See: https://github.com/rogden/tailwind-config-viewer#themereplacements

[afuno]

@rogden Thanks. Everything is successful.

[kissu]

If we do have an .scss file containing

:root {
  --color-dark-500: hsl(0, 0%, 21%);
  --color-white: hsl(0, 0%, 100%);
  ...
 }

It means that we pretty much need to copy-pasta the style file to the tailwind config, one by one ? 😖

[solidevolution]

This should work without duplication in js because single source of truth are the css variables in :root

[mokone91]

but how can i connect my 'tokens.css' to theme-viewer without parsing it to replacements?

[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