Custom background color not working in lastest version 4.1.3

[lumixraku]

I am using tailwind 4.1.3, But I met a problem, my custom varible not working.
Here is is my minimal reproduction demo. https://github.com/lumixraku/tailwind-test

I have add my-custom-bg in tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx,vue,scss}", //  scss
  ],
  theme: {
    extend: {
      colors: {
        "fill-list-active": "var(--fill-list-active)",
        "bg-selection": "var(--bg-selection)",
        "content-on-tag": "var(--content-on-tag)",
        "bg-body": "var(--bg-body)",
      },
      backgroundColor: {
        "my-custom-bg": "green", // Use hardcoded color for testing
      }
    },
  },
  safelist: ["bg-my-custom-bg", "bg-purple-500"], // Updated safelist
  plugins: [],
};

but in browser, there is no class called bg-my-custom-bg, why?

[wongjn]

You're using v4, which doesn't automatically use the tailwind.config.js file. Since the tailwind.config.js is considered legacy, consider configuring Tailwind in the CSS file. Thus, add in src/index.css (or src/variable.css since that is @imported by src/index.css):

@theme {
  --color-my-custom-bg: green;
  /* Or */
  --background-color-my-custom-bg: green;
}

[lumixraku]

You hepled me a lot, 👍