Tailwind theme color with rgb

CSS:

:root {
  --color-primary: 250, 250, 250;
  --color-secondary: 23, 23, 23;
}

.dark {
  --color-primary: 23, 23, 23;
  --color-secondary: 250, 250, 250;
}

Tailwind-config.js:

theme: {
  extend: {
    colors: {
      primary: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) { return `rgba(var(--color-primary), ${opacityValue})`;}
        if (opacityVariable !== undefined) {return `rgba(var(--color-primary), var(${opacityVariable}, 1))`;}
        return `rgb(var(--color-primary))`;
      },
      secondary: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) { return `rgba(var(--color-secondary), ${opacityValue})`;}
        if (opacityVariable !== undefined) {return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`;}
        return `rgb(var(--color-secondary))`;
      },
    },
  },
  variants: {},
  plugins: [],
};

Html:


<div class="bg-primary bg-opacity-5 border-primary border-opacity-20">
  <span class="text-secondary text-opacity-75">It works!</span>
</div>