Utilizing tailwind v3, it's feasible to customize existing colors by modifying 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"
}
}
}
}
When a user clicks on a button, I aim to change the color palette dynamically. Is there a way to override it at runtime? Could I follow a similar convention as the tailwind config file, like this:
//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)
}
I am uncertain if the just-in-time-mode could be beneficial ()
What would be the ideal method to achieve this? Can CSS variables be overridden instead? Or would I have to override all possible classes generated by tailwind? (seems excessive)