I want to add some custom color to tailwind and use them in the css.

here is my tailwind.config.js

extend: {
  color: {
      primary: "#FF69b4", 
      secondary: "#333333",
      brand: "#243c5a",
      primary: {
        50:"245 243 255",
        100: "237 233 254",
        200: "221 214 254",
        300: '196 181 253', 
        400: '167 139 250',
        500: "139 92 246",
        600: "124 58 237",
        700: "109 40 217",
        800: "91 33 182",
        900: "46 16 101",
      },
      muted: {
        50:"248 250 252",
        100: "241 245 249",
        200: "226 232 240",
        300: '203 213 225', 
        400: '148 163 184',
        500: "100 116 139",
        600: "71 85 105",
        700: "51 65 85",
        800: "30 41 59",
        900: "15 23 42",
      }
  }
},

but I find my css don’t work, for example

.nni-checkbox .nni-checkbox-label-text {
   cursor: pointer;
   color: rgb(var(--color-muted-400)/1);
   color: rgb(var(--color-muted-400)/var(--tw-text-opacity));
}

–color-muted-400 is not found as shown

<span  class="text-muted-400">Frontend Developer</span>

where text-muted-400 is also not found in styles.

anything wrong I did in the tailwind.config.js