custom classes btnP, btnS etc., are not working after update from v3 to v4

[Maciej-Suchanski]

Tailwind works but can't see why my classes stopped working i have them in class="" in html tags.
my tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const { black, white, gray, indigo } = require("tailwindcss/colors");
const { fontFamily: _fontFamily } = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./src/**/*.{js,vue,ts}"],
  theme: {
    extend: {
      colors: {
        black,
        white,
        gray,
        indigo,
        mainColor: "rgb(13 48 73)",
        btnP: "#5661b3",
        btnS: "#fb923c",
      },
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.200", "currentColor"),
      }),
      boxShadow: (theme) => ({
        outline: `0 0 0 2px ${theme("colors.indigo.500")}`,
      }),
      fill: (theme) => theme("colors"),
    },
  },
  plugins: [],
};

Yes i checked the documentation and upgrade guide did not help ...

[wongjn]

Try converting the colors to CSS config syntax:

@theme {
  --color-btnP: #5661b3;
  --color-btnS: #fb923c;
}

[Maciej-Suchanski]

It works, thank you so much!