Next.js Discord

Discord Forum

Error className doesn't match

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
Hi, I have gotten to the point were I have tried to debug this issue. Basically in my project I have it setup that certain elements change color everytime the page is reloaded. I have a function here 
export function getRandomClass(classes: string[]) {
  const randomIndex = Math.floor(Math.random() * classes.length);
  return classes[randomIndex];
}
That allows me to input an array and it randomly gives back a class. Here is the example array 
export const textColorClasses: string[] = [
  "text-blue-500",
  "text-red-500",
  "text-yellow-500",
  "text-green-500",
];
In the components I use it on I use a useState making sure "use client"; is used 
"use client";
import { getRandomClass, textColorClasses } from "@/utils/utils-client";

export default function ExampleComponent(){
  const [randomTextClass, setRandomTextClass] = useState(getRandomClass(textColorClasses),);
  return (
      <h1 className={`${randomTextClass} text-3xl font-black transition-colors  `}>
        Example Text
      </h1>
I am running into 2 issues.
1st Issue. Sometimes out of nowhere without even messing with anything related to this part of the code. The colors will break and not show up. I inspect it in the browser and the classes are there but the color isn't applied. The only way I have learned to work around this is placing the classes Array directly in the component file it is being used in and then it starts to work. Issue is that if I want to use the array throughout different parts of the project it is a lot of duplication.

2nd Issue. Even When I get the colors working I get a warning error showing me that there is a conflict of what the server has and what the client side has.
app-index.js:35 Warning: Prop 'className' did not match. Server: "text-green-500 text-3xl font-black transition-colors " Client: "text-yellow-500 text-3xl font-black transition-colors " Note: This is the short part of the entire warning error.

2 Replies

@Asian black bear Hi, I have gotten to the point were I have tried to debug this issue. Basically in my project I have it setup that certain elements change color everytime the page is reloaded. I have a function here typescript export function getRandomClass(classes: string[]) { const randomIndex = Math.floor(Math.random() * classes.length); return classes[randomIndex]; } That allows me to input an array and it randomly gives back a class. Here is the example array typescript export const textColorClasses: string[] = [ "text-blue-500", "text-red-500", "text-yellow-500", "text-green-500", ]; In the components I use it on I use a useState making sure `"use client";` is used typescript "use client"; import { getRandomClass, textColorClasses } from "@/utils/utils-client"; export default function ExampleComponent(){ const [randomTextClass, setRandomTextClass] = useState(getRandomClass(textColorClasses),); return ( <h1 className={`${randomTextClass} text-3xl font-black transition-colors `}> Example Text </h1> I am running into 2 issues. 1st Issue. Sometimes out of nowhere without even messing with anything related to this part of the code. The colors will break and not show up. I inspect it in the browser and the classes are there but the color isn't applied. The only way I have learned to work around this is placing the classes Array directly in the component file it is being used in and then it starts to work. Issue is that if I want to use the array throughout different parts of the project it is a lot of duplication. 2nd Issue. Even When I get the colors working I get a warning error showing me that there is a conflict of what the server has and what the client side has. `app-index.js:35 Warning: Prop 'className' did not match. Server: "text-green-500 text-3xl font-black transition-colors " Client: "text-yellow-500 text-3xl font-black transition-colors "` Note: This is the short part of the entire warning error.
Dayo
issue here is tailwind compiles at build time not at runtime so you can't use dynamic classNames like {randomTextClass}

you have a few options:

1. you can use the style prop instead. although this will mean passing the exact color codes. so, instead of text-blue-500 you'd pass the color codes to your textColorClasses array and then style={{color: randomTextClass}}

2. alternatively, you can use the style prop with css variables like so:

<h1 className="[var(--text-color)] text-3xl font-black transition-colors"
      style={{'--text-color': randomTextClass}}  
  >
        Example Text
  </h1>


hope this helps.