Unable to apply certain CSS-attributes to Radix components

I am working on a dropdown menu and text-based properties like

text-xl

text-xl

font-medium

font-medium

were applied, but not

bg-lime-400

bg-lime-400

Looking at the DOM I can see that

bg-lime-400

bg-lime-400

is in the classname, but looking at the styles tab in dev tools I see no mention of background-color being applied or overridden.

Here is the code snippet in case it proves useful:

<DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Image
                    src={session.user.image}
                    width={64}
                    height={64}
                    className="rounded-full"
                    alt="Discord profile picture"
                  />
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal className="bg-lime-400">
                  <DropdownMenu.Content className="bg-lime-400 text-xl">
                    <DropdownMenu.Item className="bg-lime-400">
                      <Link href={`/${session.user.id}/lineups`}>
                        <a>Your Lineups</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/create`}>
                        <a>Submit Lineup</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/user/${session.user.id}`}>
                        <a>View Profile</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
                    <DropdownMenu.Item>
                      <Link href={`/api/auth/signout`}>
                        <a>Logout</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Arrow />
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              </DropdownMenu.Root>

<DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Image
                    src={session.user.image}
                    width={64}
                    height={64}
                    className="rounded-full"
                    alt="Discord profile picture"
                  />
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal className="bg-lime-400">
                  <DropdownMenu.Content className="bg-lime-400 text-xl">
                    <DropdownMenu.Item className="bg-lime-400">
                      <Link href={`/${session.user.id}/lineups`}>
                        <a>Your Lineups</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/create`}>
                        <a>Submit Lineup</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/user/${session.user.id}`}>
                        <a>View Profile</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
                    <DropdownMenu.Item>
                      <Link href={`/api/auth/signout`}>
                        <a>Logout</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Arrow />
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              </DropdownMenu.Root>

Unable to apply certain CSS-attributes to Radix components

I am working on a dropdown menu and text-based properties like

text-xl

text-xl

font-medium

font-medium

were applied, but not

bg-lime-400

bg-lime-400

Looking at the DOM I can see that

bg-lime-400

bg-lime-400

is in the classname, but looking at the styles tab in dev tools I see no mention of background-color being applied or overridden.

Here is the code snippet in case it proves useful:

<DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Image
                    src={session.user.image}
                    width={64}
                    height={64}
                    className="rounded-full"
                    alt="Discord profile picture"
                  />
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal className="bg-lime-400">
                  <DropdownMenu.Content className="bg-lime-400 text-xl">
                    <DropdownMenu.Item className="bg-lime-400">
                      <Link href={`/${session.user.id}/lineups`}>
                        <a>Your Lineups</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/create`}>
                        <a>Submit Lineup</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/user/${session.user.id}`}>
                        <a>View Profile</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
                    <DropdownMenu.Item>
                      <Link href={`/api/auth/signout`}>
                        <a>Logout</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Arrow />
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              </DropdownMenu.Root>

<DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Image
                    src={session.user.image}
                    width={64}
                    height={64}
                    className="rounded-full"
                    alt="Discord profile picture"
                  />
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal className="bg-lime-400">
                  <DropdownMenu.Content className="bg-lime-400 text-xl">
                    <DropdownMenu.Item className="bg-lime-400">
                      <Link href={`/${session.user.id}/lineups`}>
                        <a>Your Lineups</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/create`}>
                        <a>Submit Lineup</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Link href={`/user/${session.user.id}`}>
                        <a>View Profile</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Separator className="my-1 h-px bg-gray-700" />
                    <DropdownMenu.Item>
                      <Link href={`/api/auth/signout`}>
                        <a>Logout</a>
                      </Link>
                    </DropdownMenu.Item>
                    <DropdownMenu.Arrow />
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              </DropdownMenu.Root>

Unable to apply certain CSS-attributes to Radix components

Unable to apply certain CSS-attributes to Radix components

Similar Threads

Similar Threads

Similar Threads