So I have a very odd use case. I need two tailwind files built with the primary colour changed on each.

Here is an example.

const primaryTheme = {
    '50': '#fff3e0',
    '100': '#ffe0b2',
    '200': '#ffcc80',
    '300': '#ffb74d',
    '400': '#ffa726',
    '500': '#ff9800',
    '600': '#fb8c00',
    '700': '#f57c00',
    '800': '#ef6c00',
    '900': '#e65000',
};


module.exports = {

 ...

theme: {
  extend: {
    colors: {
        primary: primaryTheme,
}

...

so that would be one file and the other would swap the primaryTheme const for say this

primaryTheme = {
        '50': '#e6f5ea',
        '100': '#c2e7cb',
        '200': '#9bd7ab',
        '300': '#71c889',
        '400': '#4fbc70',
        '500': '#27b057',
        '600': '#1da14d',
        '700': '#0f8f41',
        '800': '#007e37',
        '900': '#005f23',
      }

so I'm trying to when I need to build for production, change the colour variables to a set of predefined colours.

So one build might generate two app.css files

app-blue.css
app-green.csss

for example with the primary theme variables changed.

Is there a way for me to automate this so I don't have to in and manually swap the const out for a different colour each time and then change the file names?

currently right now I'm building via npx but I could also with postcss

"scripts": {
    "dev": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --watch",
    "build": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --minify"
  },

I'm looking to only generate the multiple files on "build" if that makes it easier.

Thank you so much in advance for any hint or guidance :)