Feature ability to set variables for specific media query

[fgdaniel]

I would like it, and I don't think that I would only like it, to have the ability to insert variables for different resolutions (media query) directly from tailwind.config.js, to be able to use the function @screen or simply @media in the following way: ( Note already works but does not set to :root level)

const defColors = require("tailwindcss/colors");
module.exports = {
    theme: {
        variables: (theme) => ({
            // default variables on all devices
            DEFAULT: {
                white: defColors.white,
            },
            // override variables on certain media query, can use @screen md|lg|xl or @media (min|max-width: value)
            "@screen md": {
                white: 'red',
            }
        }),

    },

};

Example below how it already works and is wrong

:root {
    --colors-white: #fff;
    --colors-white-rgb: 255,255,255;
}

@media (min-width: 768px) {
    --colors-white:red
}

If we look, it does not set at the level of :root {}

Below is an example of how it should be

:root {
    --colors-white: #fff;
    --colors-white-rgb: 255,255,255;
}

@media (min-width: 768px) {
    :root {
        --colors-white:red
    }
}

Why do I ask for this aspect, because for example I want to make a main menu using variables but at the same time on responsive I would like to modify these variables without having to overwrite the variables in the css file and there will probably be many cases when it is necessary to overwrite the variables on responsive

Thank you and I'm sorry that I don't have code as an example by which we can achieve this aspect, it's beyond my powers

[mertasan]

Hi Florin,

Thank you very much for your suggestion. It sounds great. I will add this feature as soon as possible unless I encounter an issue that prevents me from doing so.

Thanks!

[fgdaniel]

I have another suggestion but I don't know how to implement it, if we can do it like this:

const defColors = require("tailwindcss/colors");
module.exports = {
    theme: {
        variables: (theme) => ({
            // default variables on all devices
            DEFAULT: {
                white: defColors.white,
            },
        }),
        // responsive variables
        // schema variant: { ... values }
        responsiveVariables: (theme) => ({
            // default
            DEFAULT: {
                // MD is tailwindcss media query
                // schema: media-query: { ...values}
                md: {
                    colors: {
                        white: 'red',
                    }
                },
                // or custom
                '@media (min-width: 768px)': {
                    colors: {
                        white: 'red',
                    }
                }
            },
            // dark
            dark: {
                // MD is tailwindcss media query
                md: {
                    colors: {
                        white: 'red',
                    }
                },
                // or custom
                '@media (min-width: 768px)': {
                    colors: {
                        white: 'red',
                    }
                }
            }
        })

    },

};

I think you can do it, I believe in you!!!

i think is better if we have responsive variables separated to main variables or if is ok with you we can have in the same location, your choice.

Thanks you.