Tailwind background color not workign for a specific color.

[rotund token]

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.

[tiny cedar]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[snow sonnet]

Hello @rotund token
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

[rotund token]

hi, thanks for your response! but that's not the case. im using create-next-app@latest

[snow sonnet]

hello @rotund token

May i see your code what is wrong?

[rotund token]

            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

@snow sonnet

[snow sonnet]

I will check it out.

please wait for me.

Do you use Theme?

@rotund token

please erase the code hover:dark:bg-gray-700

[rotund token]

yes

[snow sonnet]

and so on?

try it once.

which theme do you use?

Your own sass theme?

@rotund token

[rotund token]

i just use next-themes

[rotund token]

why ?

on light theme it works expected

when i have hover:bg-blue-300 also

[snow sonnet]

well...

have you search all for bg-gray-700?

or matched color #.... code?

Maybe there is the problem if you use next-theme.

[rotund token]

why then it works with bg-gray-600

[snow sonnet]

I mean there would be corresponding texture that preventing the code.

[rotund token]

nope

[snow sonnet]

???

[rotund token]

i can see in inspect tools

it's being applied correctlly

[snow sonnet]

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.