Templ config for passsing additional variables to component

[viirak]

in Tailwindcss, there's tailwind.config.js config file which allow the user to add extra configurations and theme and especially plugins etc...

Is there way to pass variables to component similarly like tailwind.config?

Like for example,

If we have the templ.toml config file which the compiler will look for when initiated. Then from within the file we could define something like variable for colors ..etc

[colors]
gray = ["#f8f9fa", "#f1f3f5", "#e9ecef", "#dee2e6", "#ced4da", "#adb5bd", "#868e96", "#495057", "#343a40", "#212529"]

so that in templ component file we use it like

var colors = templ.Config('colors')

css primaryClassName() {
  background-color: { colors.gray[9] };
  color: { colors.gray[0] };
}

[joerdav]

No there is no ability for this. I would recommend for type safety defining these in Go:

var colors = map[string][]string{
  "gray": { "#f8f9fa", "#f1f3f5", "#e9ecef", "#dee2e6", "#ced4da", "#adb5bd", "#868e96", "#495057", "#343a40", "#212529" },
}

css primaryClassName() {
  background-color: { colors.["gray"][9] };
  color: { colors.gray[0] };
}

Or using another package for loading config in:

https://github.com/joho/godotenv https://github.com/burntSushi/toml