Kevin Powell - Community•16mo ago

Dynamically setting the color in TailwindCSS.

I am working with Next.js and Tailwind CSS and using Context API to set the theme of my webpage dynamically. I have a color palette of 8 colors. But hover:${themeColor.bg.base} is not working with hover, otherwise the color is working fine. themeColor.hover.base actually points to bg-themeColor2Base, and themeColor2Base is defined in tailwind.config.css.

13 Replies

Wolle•16mo ago

The class must be complete as string somewhere, so TW can detect it and put it into the CSS.

Daryl•16mo ago

To complement the comment above, take a look to the docs: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

Wolle•16mo ago

Thanks for the link. 🙂 (I was just about to look for that 😁 )

AbulkalamOP•16mo ago

Alright! thanks a lot I am working with Next.js and Tailwind CSS. I am trying to change the theme dynamically. Below is the content from a state inside a context. I have 8 colors, each with 5 shades (I have provided only one here because the message is getting lengthy). Whichever color I set in the initial state, it works fine. When I use the setter function to set another color, the bg i.e. themeColor.bg.dark etc works fine but the hover, peerChecked and after i.e. themeColor.bg.hover.dark etc. don't work. Moreover, once I have set all the colors in the initial state one by one, everything starts working, even the setter (like probably all the colors are now stored in cache,) until I refresh the page, and the issue is still the same. Initial State

bg: {
  "dark": "bg-themeColor1Dark",
  "hover": {
    "dark": "hover:bg-themeColor1Dark",
  },
  "peerChecked": {
    "dark": "peer-checked:bg-themeColor1Dark",
  },
  "after": {
    "dark": "after:bg-themeColor1Dark",
  }
},

bg: {
  "dark": "bg-themeColor1Dark",
  "hover": {
    "dark": "hover:bg-themeColor1Dark",
  },
  "peerChecked": {
    "dark": "peer-checked:bg-themeColor1Dark",
  },
  "after": {
    "dark": "after:bg-themeColor1Dark",
  }
},

Setting the new state

bg: {
  "dark": `bg-${themeColor}Dark`,
  "hover": {
    "dark": `hover:bg-${themeColor}Dark`,
  },
  "peerChecked": {
    "dark": `peer-checked:bg-${themeColor}Dark`,
  },
  "after": {
    "dark": `after:bg-${themeColor}Dark`,
  }
},

bg: {
  "dark": `bg-${themeColor}Dark`,
  "hover": {
    "dark": `hover:bg-${themeColor}Dark`,
  },
  "peerChecked": {
    "dark": `peer-checked:bg-${themeColor}Dark`,
  },
  "after": {
    "dark": `after:bg-${themeColor}Dark`,
  }
},

The classes which are not applied are shown in HTML, but don't appear in CSS in browser devTools.

Daryl•16mo ago

I don't understand your issue. I have some questions: * Is it caused by React or Tailwind CSS? * Does Tailwind generate the styles for those classes? * Why you are still using interpolation for your class names (e.g. bg-${themeColor}Dark)? Okay...

AbulkalamOP•16mo ago

There would be bg-themeColor1Dark bg-themeColor2Dark . and so on... and this class is working just fine the issue is with the pseudo-class/elements 1. Probably Tailwind CSS 2. Yeah it generates, in initial state: for all classes, but after using the setter: for bg, text etc, not for :after, :peer-checked

Daryl•16mo ago

If you read the docs, you'll see that string interpolation is something you should avoid. Tailwind does not recognize a class name with the shape: bg-${logic} , because logic is unknown at the time that Tailwind generates the styles for that class. Do you have any problems understanding the docs: https://tailwindcss.com/docs/content-configuration#dynamic-class-names ?

AbulkalamOP•16mo ago

I have read the docs, but why is it working for the background color and text then?

Daryl•16mo ago

Most likely because you are using those class names somewhere else in your code and Tailwind has generated them.

AbulkalamOP•16mo ago

And isn't the whole string generated before being applied in the className? Since I am not using string interplation inside classname

Daryl•16mo ago

That's the case in runtime, but Tailwind generates the styles at build time.

AbulkalamOP•16mo ago

alright. Thanks a lot

Daryl•16mo ago

No problem.

Gaming

Programming

Dynamically setting the color in TailwindCSS.