Hoisting CSS variables to root?

[GreenImp]

Hi,

Is it possible to get the theme CSS variables set on the :root or html, rather than on the element that the theme is specified? I realise that this would break nested themes, but I was hoping to be able to pass through a flag so it can be turned on / off in the tailwind config. In my use case, I'm not nesting themes.

Maybe something like:

plugins: [
    createThemes(
        {
            light: { 
                ...
            }
        },
        {
            // I'm useless at naming things..
            onRoot: true
        }
    )
],

My issue is that I need the variables accessible on the html and body, but I don't have access to the markup to add the theme declaration to them.

Instead, I have to add them to a HTML element inside the body, but this only makes them accessible inside that element.

[L-Blondy]

In your example the onRoot property can be applied to one theme only because everyone of its usage would override the previous ones.

In a future version I might hoist the variable declarations of the first theme to the :root, therefore making it the default theme.

Would this solve you issue ?

[GreenImp]

Yes, that would be perfect!

[L-Blondy]

Add a defaultTheme option in version 2.1.0.

See https://github.com/L-Blondy/tw-colors#defaulttheme