Need to add a theme color which is dynamic (from env)

[platput]

So in the prior version of tailwindcss, I used to have config file which helped me to set a custom theme for the entire app based on the value of an env variable.

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");
export default {
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
  content: [],
  theme: {
    extend: {
      fontFamily: {},
      colors: {
        clientTheme: colors[process.env.NUXT_PUBLIC_COLOR_PRIMARY || "orange"],
      },
    },
  },
  plugins: [],
};

But ever since the tailwind config was deprecated in favor of .css way of doing things, I am unable to do this. Even including the config file in the css file doesn't seem to work. Basically I just want to be able to use the clientTheme as the color utility classes but the value has to be taken from the env file. I am at a loss on how to do this.

[jakubman1]

You can use the legacy javascript-based config using the @config directive.

You can use it by removing all color definitions from your tailwind.css file. Then create a tailwind.config.js file and inside it do something like this:

const brandColorName = import.meta.env.VITE_BRAND_COLOR || "blue";

const colors = {
  white: "#fff",
  black: "#000",
  blue: {
    "50": "#f1f6fd",
    "100": "#dfebfa",
    "200": "#c6dbf7",
    "300": "#9ec5f2",
    "400": "#70a5ea",
    "500": "#4f85e2",
    "600": "#3867d6",
    DEFAULT: "#3867d6",
    "700": "#3155c4",
    "800": "#2d46a0",
    "900": "#293e7f",
    "950": "#1d274e",
  },
  // ... other colors
};

export default {
  theme: {
    colors:
      {
        ...colors,
        brand: colors[brandColorName]
      },
  },
}

And in the tailwind.css file include this line:

@config "../tailwind.config.js";

[platput]

I was generating the css classes dynamically on build time. But this is a much better way of doing it. Will try and implement it.