Search code examples
reactjstailwind-css

Certain Tailwind CSS Classes Not Applying Properly

className={${valueItem === value ? "bg-green-400 bg-opacity-10 text-green-500 hover " : "hover "} flex px-8 py-2 bg-white w-full text-sm font-semibold text-secondary-text transition-all}

Here, bg-green-400 doesn't work, but other classes do. Similarly, text-green-500 doesn't work, but other text colors do. Does anyone know how to fix this "bug"?

I tried everything, but this happened to me in the past, and the fix was reinstalling.

Solution

  • The existing bg-white and text-secondary-text are overriding the bg-green-400 and text-green-500 respectively. Consider only applying one property at any one time like:

    className={
  ${valueItem === value
    ? "bg-green-400 bg-opacity-10 text-green-500 hover "
    : "bg-white text-secondary-text hover "
  } flex px-8 py-2 w-full text-sm font-semibold transition-all}