Reference Tailwind Custom colors

Question

In my tailwind config i extend the custom colors as followed:

  theme: {
    extend: {
      colors: {
        // BACKGROUND COLORS
        // Light
        colorBgLight: "#fffef7",
        colorHeaderBgLight: $colorBgLight,
        }
    }
  }

is there a way in the tailwind config I can reference the colorBgLight as a variable for the colorHeaderBgLight just like the example ?

Answer 1

Since the tailwind config file is a js file. You can use any variable within.

So if you set a variable to "#fffef7", you can reference it anywhere within the file.

// tailwind.config.js

let colorBgLight = "#fffef7"

theme: {
  extend: {
    colors: {
      // BACKGROUND COLORS
      // Light
      colorBgLight: colorBgLight,
      colorHeaderBgLight: colorBgLight,
    }
  }
}