CODEWITHSUNDEEP
javascripttailwind-csstailwind-3
Kevin G
Kevin G

Reputation: 2455

Reference Tailwind Custom colors

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 ?

Upvotes: 2

Views: 587

Answers (2)

Edwin Fernando Pirajan Arevalo
Edwin Fernando Pirajan Arevalo

Reputation: 51

Remember that in Javascript you can assign styles to a variable, either in StyleComponents or vanilla Js, for example

let color1 = #f3f3f3

let color2 = #b5b4b9

theme: {
    extends: {
        colors: {
            colorBgLight: color1, //<---variable1
            colorHeaderBgLight: color2,   //<---variable2
        }
    }
}

Upvotes: 1

Raphael Cunha
Raphael Cunha

Reputation: 1114

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,
    }
  }
}

Upvotes: 2

Related Questions