Is it possible to define CSS variables as the value of theme colors?

[imalitavakoli]

This is my tailwind.config.js:

module.exports = {
  theme: {
    colors: {
      informative: {
        lighter: 'rgb(var(--m-informative-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-informative-color) / <alpha-value>)',
        darker: 'rgb(var(--m-informative-darker-color) / <alpha-value>)',
      },
      positive: {
        lighter: 'rgb(var(--m-positive-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-positive-color) / <alpha-value>)',
        darker: 'rgb(var(--m-positive-darker-color) / <alpha-value>)',
      },
      negative: {
        lighter: 'rgb(var(--m-negative-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-negative-color) / <alpha-value>)',
        darker: 'rgb(var(--m-negative-darker-color) / <alpha-value>)',
      },
      notice: {
        lighter: 'rgb(var(--m-notice-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-notice-color) / <alpha-value>)',
        darker: 'rgb(var(--m-notice-darker-color) / <alpha-value>)',
      },
      neutral: {
        lighter: 'rgb(var(--m-neutral-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-neutral-color) / <alpha-value>)',
        darker: 'rgb(var(--m-neutral-darker-color) / <alpha-value>)',
      },
      primary: {
        lighter: 'rgb(var(--m-primary-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-primary-color) / <alpha-value>)',
        darker: 'rgb(var(--m-primary-darker-color) / <alpha-value>)',
      },
      accent: {
        lighter: 'rgb(var(--m-accent-lighter-color) / <alpha-value>)',
        DEFAULT: 'rgb(var(--m-accent-color) / <alpha-value>)',
        darker: 'rgb(var(--m-accent-darker-color) / <alpha-value>)',
      },

      inherit: 'inherit',
      current: 'currentColor',
      transparent: 'transparent',
    },
  },
  plugins: [require('@tailwindcss/forms'), require('daisyui')],
  darkMode: ['class', '.m-dark'],

  // https://daisyui.com/docs/config/
  daisyui: {
    themes: [
      {
        def: {
          primary: '#a991f7',
          secondary: '#f6d860',
          accent: '#37cdbe',
          neutral: '#3d4451',
          'base-100': '#ffffff',
        },
      },
    ],
  },
};

As you can see, I have already my own custom 'primary', 'accent', 'neutral', etc, Tailwindcss theme colors...
Now how can I tell my custom theme Daisyui to read its colors (required colors at least) from the already defined Tailwindcss theme colors.

Currently, Daisyui breaks my UI! How? Well, as an example, before using it, when I was using from-primary CSS class, it meant:

.from-primary {
    --tw-gradient-from: rgb(var(--e-primary-color) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--e-primary-color) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

Now it means:

.from-primary {
    --tw-gradient-from: var(--fallback-p,oklch(var(--p)/1)) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--fallback-p,oklch(var(--p)/0)) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

And because the Daisyui primary theme color is something else (from what I originally had), I am not getting the results that I'm expecting! Even if I don't define any themes: themes: [], because there's no theme, I am not seeing any colors applied on my UI.

How can I fix this?
Any help is so appreciated. Thanks a lot ❤️

[saadeghi]

I would use another name…
I mean neutral, primary, accent names already exist in daisyUI so when your custom color names have the exact same names, there will be conflicts. It can be easily avoided by using another name for your custom colors.

I would suggest using daisyUI color names for everything. they are enough for almost any design system.
And if you need more color names (for example lighter, darker, etc) here's a tutorial to add more color names: https://daisyui.com/blog/how-to-add-new-colors-to-daisyui/

Let me know if you have a question.