Facing a strange issue where bg classes are not getting applied.

[abhinav-anshul]

Hi,

I'm using NextJS App Router version 13.4.1 with Shadcn UI components.

I have a very simple file as this -

function BrowserFrames(props: Props) {
  const { theme } = props
  const [browser, mode] = theme.split("-")

  // if (browser === "macos") {
    return (
      <div
        className={`flex opacity-80 items-center w-full px-4 py-[6px] rounded-t-lg ${
          mode === "light" ? `bg-white` : `bg-black`
        } `}
      >
        <div className="flex items-center">
          <div className="w-2 h-2 bg-[#EE615F]  rounded-full"></div>
          <div className="w-2 h-2 bg-yellow-500 rounded-full" />
          <div className="w-2 h-2 bg-red-500 rounded-full" />
        </div>
      </div>
    )
}

For some reason, the bg-red-500 is getting rendered on the screen, but the others bg is not (like the yellow one, neither the #ee615f one).

If I convert all to bg-red-500, it does get painted on the screen.

In the dev tools, say for this - <div className="w-2 h-2 bg-[#EE615F] rounded-full"></div>, all the other classes are there, with there respective values, but the bg-[#EE615F] is no where. I can see the bg-white from the parent element but not this one.

How can I solve this issue? I think there is something really bad going one with cache or tooling in general. Please note I'm not a newbie developer or a beginner tailwind user.

[wongjn]

Consider checking the content file globs sufficiently cover the file that the code appears in.

[abhinav-anshul]

wow thanks! my utils folder wad not there. I did not bother to look because rest of the tailwind classes were rendering properly except for the bg ones

[devWithKD]

I am facing same issue.
My config looks like below, and the component with which i am facing the issue is located inside ./src/components
What am i doing wrong?

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./src/**/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: "selector",
  theme: {
    extend: {
      fontFamily: {
        poppins: "Poppins",
      },
    },
  },
  plugins: [
    // eslint-disable-next-lin no-undef
    require("@tailwindcss/typography"),
    require('tailwind-scrollbar'),
  ],
  future: {
    hoverOnlyWhenSupported: true,
  }
};

[devWithKD]

Found the mistake,
as per explained here, generating classes dynamically is not the correct way of adding classes dynamically. My apologies.