Why are the tailwind classes not doing anything in the component?

So I have this navbar component where everything works correctly. Just for context:

<>
          <div className="hidden md:flex items-center justify-center gap-4">
            <OpenGameButton session={session} />
          </div>

          {providers &&
            Object.values(providers).map((provider) => (
              <div className="hidden md:flex align-center justify-center text-light-text dark:text-dark-text">
                <Image src={userIcon} alt="user icon" />
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => {
                    signIn(provider.id);
                  }}
                  className="text-xl font-normal"
                >
                  Sign
                  <br />
                  in
                </button>
              </div>
            ))}

          <div className="md:hidden">
            <OpenGameButton session={session} />
          </div>

          <NavMobile
            session={session}
            provider={providers}
            className="md:hidden"
          />
        </>

<>
          <div className="hidden md:flex items-center justify-center gap-4">
            <OpenGameButton session={session} />
          </div>

          {providers &&
            Object.values(providers).map((provider) => (
              <div className="hidden md:flex align-center justify-center text-light-text dark:text-dark-text">
                <Image src={userIcon} alt="user icon" />
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => {
                    signIn(provider.id);
                  }}
                  className="text-xl font-normal"
                >
                  Sign
                  <br />
                  in
                </button>
              </div>
            ))}

          <div className="md:hidden">
            <OpenGameButton session={session} />
          </div>

          <NavMobile
            session={session}
            provider={providers}
            className="md:hidden"
          />
        </>

You can see im using another component here called OpenGameButton, where none of the classes seem to be working for some reason i can't figure out. Here is just the return code of OpenGameButton because the rest is just the onclick handler:

<div className="w-full bg-red-500 flex items-center justify-center">
      <div
        className="p-2 bg-cyan-950 flex items-center cursor-pointer border-radius-8"
        onClick={openGame}
      >
        <button className="text-slate-300 text-4xl font-normal">PLAY</button>
      </div>
    </div>

<div className="w-full bg-red-500 flex items-center justify-center">
      <div
        className="p-2 bg-cyan-950 flex items-center cursor-pointer border-radius-8"
        onClick={openGame}
      >
        <button className="text-slate-300 text-4xl font-normal">PLAY</button>
      </div>
    </div>

None of the colors are working but the weirdest thing is that the p-2 class is actually working, but if i change it to anything else like p-3 or whatever it removes the padding completely. I dont know what to do or where to look. Its so over guys.

4 Replies

croganm•17mo ago

It's because you're likely using p-2 somewhere else in the project where tailwind looks at that code. I'm guessing for some reason your component is being excluded from tailwind, hence why changing it to p-3 or any other classes is not working. What does your tailwind config look like? And what does your folder structure look like?

treeOP•17mo ago

treeOP•17mo ago

now i see it i think. should i add like a line with

"./utils/**/*.{js,ts,jsx,tsx,mdx}",

"./utils/**/*.{js,ts,jsx,tsx,mdx}",

forgot to mention that the OpenGameButton is the openGame.tsx in utils Yes it's fixed 🤡 😭 Ty for bringing the light. Its my first time with tailwind and its been pure chaos. But somehow everything ends up working out

croganm•17mo ago

Apologize for the delay in response but glad you figured it out! Tailwind really is great once it's all setup 😂

Gaming

Programming

Why are the tailwind classes not doing anything in the component?