React router Link tag color is not changing in build environment

November 4, 2021

I am using tailwind with react and using conditional rendering to change the color of the link tags in the navbar based on different screens. It works fine in the localhost but when I run the build and place it on the server the link’s color remains the same. Here is the code for the link

 <NavLink
            to={`${Routes.main}`}
            className={`m-2 block mt-4 lg:inline-block lg:mt-0  lg:${
              heroSection ? "text-white" : "text-teal-200"
            }`}
          >

What is the reason for it to work on the local environment and not in the build?

>Solution :

Don’t use string concatenation to create class names:

lg:${heroSection ? "text-white" : "text-teal-200"}

Do dynamically select a complete class name:

${heroSection ? "lg:text-white" : "lg:text-teal-200"}

That means that it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes.

learn more: Tailwind Optimizing for Production