How can I get some value (that I defined) inside tailwind.config.js file?

[evgeniy-vashchuk]

Can I somehow get the value that I defined in tailwind.config.js to use it again?

For example, I need next:

colors: {
inherit: 'inherit',
current: 'currentColor',
transparent: 'transparent',
'white': '#FFFFFF',
'black': '#0C1A35',
'gray': '#D9DBDD',
'gray-light': '#F4F4F5',
'yellow': '#FFE759',
'orange': '#FF7300',
'primary': theme.colors.orange // here I need to insert some color from above and It must be primary color
},

[wongjn]

Have your colors as an object and then reference that object:

const myColors: {
  inherit: 'inherit',
  current: 'currentColor',
  transparent: 'transparent',
  'white': '#FFFFFF',
  'black': '#0C1A35',
   'gray': '#D9DBDD',
  'gray-light': '#F4F4F5',
  'yellow': '#FFE759',
  'orange': '#FF7300',
};

export default {
  theme: {
    colors: {
      ...myColors,
      primary: myColors.orange,

[evgeniy-vashchuk]

Thanks! Is this the only way to do it?

[wongjn]

I would not think this is the only way to do it.

[evgeniy-vashchuk]

I accidentally saw how to do this in a training video on YouTube:

colors: {
      inherit: 'inherit',
      current: 'currentColor',
      transparent: 'transparent',
      'white': '#FFFFFF',
      'black': '#0C1A35',
      'gray': '#D9DBDD',
      'gray-light': '#F4F4F5',
      'gray-dark': '#7B7D7E',
      'yellow': '#FFE759',
      'orange': '#FF7300',
      'red': '#EB5757',
      'primary': "theme('colors.orange')",
      'secondary': "theme('colors.black')",
      'danger': "theme('colors.red')"
}

[tylerrrkd]

@evgeniy-vashchuk thanks friend
it works well, but this kind of value could not be used in scss file, like

--color-primary: theme('colors.orange'); // works
--color-success: theme('colors.primary'); // does not work, will be recognized as plain text

// but it works well in this situation, it is enough
<p
  className="text-primary"
>
  text
</p>