I want to access the value of the "accent" colour from the config file so I can assign it to a new colour. I have tried danger: theme('colors.accent') but I'm getting this error > theme is not defined. I want to avoid hard coding the hex colour code again. Is there a way to do this easily?

tailwind.config.js

colors: {

accent: '#57A0D7',
accentlight: '#88BCE2',
accentdark: '#4B8CBD',
accentdarker: '#4682B0',

danger: theme(colors.accent),

I want to access the value of the "accent" colour from the config file so I can assign it to a new colour. I have tried danger: theme('colors.accent') but I'm getting this error > theme is not defined. I want to avoid hard coding the hex colour code again. Is there a way to do this easily?

tailwind.config.js

colors: {

accent: '#57A0D7',
accentlight: '#88BCE2',
accentdark: '#4B8CBD',
accentdarker: '#4682B0',

danger: theme(colors.accent),

• javascript
• css
• tailwind-css

3 Answers 3

Sure thing. Just set the value you want to appear in multiple places outside of your module.exports and you can use it anywhere as a variable since the config file is just a js file.

const accent = '#57A0D7';

module.exports = {
  theme: {
   colors: {
    accent,
    accentlight: '#88BCE2',
    accentdark: '#4B8CBD',
    accentdarker: '#4682B0',
    danger: accent
   }
  }
 }

Try using a function

colors: {

accent: '#57A0D7',
accentlight: '#88BCE2',
accentdark: '#4B8CBD',
accentdarker: '#4682B0',

danger: theme => theme('colors.accent'),

You can use:

xxx: ({ theme }) => ({
  danger: theme(colors.accent),
})

In your example:

module.exports = {
  theme: {
    colors: {
      accent: '#57A0D7',
      accentlight: '#88BCE2',
      accentdark: '#4B8CBD',
      accentdarker: '#4682B0',

      // ...
    },
    background: ({ theme }) => ({
      danger: theme(colors.accent),
    })
  }
}

As shown here: https://tailwindcss./docs/theme#referencing-other-values