Next.js Discord

Discord Forum

Tailwind background color not workign for a specific color.

Unanswered
Field Sparrow posted this in #help-forum
Open in Discord
Field SparrowOP
so i am using clsx to apply a special background color to one of the items in navbar . the background of all other items is set to bg-gray-900. when i set the background of the current path item to bg-gray-700, it doesn't work and each item has the same bg color. when i set it to bg-gray-600 it works.

37 Replies

Koolie
Hello @Field Sparrow
Maybe you don't create your project from scratch.
Some projects cloned from Github are required to reinstall the tailwindCSS and add the features to the catch.
Thanks
Koolie
hello @Field Sparrow
May i see your code what is wrong?
Field SparrowOP
 <Link
            key={link.name}
            href={link.href}
            className={clsx(
              "flex h-[48px] grow items-center justify-center gap-2 rounded-md  p-1 text-md font-medium hover:bg-blue-300 hover:dark:bg-gray-700 hover:dark:text-white hover:text-black md:flex-none md:p-2 md:px-3 bg-blue-100 dark:bg-gray-900",
              {
                "bg-blue-300 dark:bg-gray-700 dark:text-white text-black":
                  pathname === link.href, //highlihting current route
              }
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
im on /explore
when i set dark:bg-gray-600 for the conditional css instead, it works like so
@Koolie
Koolie
I will check it out.
please wait for me.
Do you use Theme?
@Field Sparrow
Field SparrowOP
yes
Koolie
please erase the code hover:dark:bg-gray-700
and so on?
try it once.
which theme do you use?
Your own sass theme?
@Field Sparrow
Field SparrowOP
i just use next-themes
@Koolie please erase the code hover:dark:bg-gray-700
Field SparrowOP
why ?
on light theme it works expected
when i have hover:bg-blue-300 also
Koolie
well...
have you search all for bg-gray-700?
or matched color #.... code?
Maybe there is the problem if you use next-theme.
Field SparrowOP
why then it works with bg-gray-600
Koolie
I mean there would be corresponding texture that preventing the code.
Field SparrowOP
nope
Koolie
???
Field SparrowOP
i can see in inspect tools
it's being applied correctlly
Koolie
well...
Could you send me the all code if you don't mind?
You are a developer also or a student?
I can't help you without the code.
Because i can only guess.