How to override tailwind colors in runtime

Question

I'm using tailwind v3 and according to the docs, it's possible to override existing colors using the tailwind.config file

https://tailwindcss.com/docs/customizing-colors

module.exports = {
    theme: {
        extend: {
            colors: {
                gray: {
                    "50": "#fcefed",
                    "100": "#fadedb",
                    "200": "#f7ceca",
                    "300": "#f5bdb8",
                    "400": "#f2ada6",
                    "500": "#ef9d94",
                    "600": "#ed8c82",
                    "700": "#ea7c71",
                    "800": "#e86b5f",
                    "900": "#e55b4d"
                }
            }
        }
}

I want to override the color palette when a user clicks on a button. How can I override it during runtime? Ideally, I could use the same convention as the tailwind config file, something like that:

    //user click on a button
    const onColorsPicked = () => {
        const colors = {
            "50": "#fcefed",
            "100": "#fadedb",
            "200": "#f7ceca",
            "300": "#f5bdb8",
            "400": "#f2ada6",
            "500": "#ef9d94",
            "600": "#ed8c82",
            "700": "#ea7c71",
            "800": "#e86b5f",
            "900": "#e55b4d"
        }
        //what would be the best approach to implement this function? it's even possible?
        overrideTailwindColor("gray", colors)
    }

Not sure if the just-in-time-mode could help or not (https://v2.tailwindcss.com/docs/just-in-time-mode)

What would be the best approach to do that? There are any CSS variables I can override instead? Or I should get all the classes that tailwind could generate and override them? (sounds like a huge overkill)

I am still a bit in the dark about what you are trying but if you are trying to implement a feature similar to dark mode on a page you could add all necessary colors ahead of time and switch them out via `class` modifications in JS. — wp78de, Dec 24 '22 at 17:01
not something like dark mode, more like a theme, just trying to override a color palette in runtime and not in build @wp78de — c137, Dec 24 '22 at 17:04
You've answered your own question - use CSS variables and override them — Ihar Aliakseyenka, Dec 25 '22 at 16:35

score 0 · Answer 1 · answered Dec 24 '22 at 17:27

I want to override the color palette when a user clicks on a button. How can I override it during runtime?

Short answer is you can't do this!

because tailwind is installed as a dev dependency it means it'll not go to production. under the hood, tailwind work as a compiler and then compile your code to CSS you can't compile this code on runtime.

"devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4"
 }

How to override tailwind colors in runtime

1 Answers1