tree Posts - Answer Overflow

tree

Posts Comments

KPCKevin Powell - Community

•Created by tree on 9/7/2023 in #front-end

How to place this svg as my background footer with Tailwind?

13 replies

KPCKevin Powell - Community

•Created by tree on 8/12/2023 in #front-end

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.

11 replies

Gaming

Programming