I’m currently building a project that’ll allow the user to choose their color scheme, which will be saved to an API (currently using a local dummy API). I’m looking to grab the data from the API and update the tailwind.config.js file with the new colors, but can’t seem to achieve this. I get the following error message:

[vite] Internal server error: [postcss]
/Applications/MAMP/htdocs/CG/src/index.css:213:5: ‘colors.primary400’ was found but does not resolve to a string.

Below is my code so far…

http.js

export async function fetchClientData() {
    const response = await fetch("http://localhost:3000/client");
    const resData = await response.json();

    if (!response.ok) {
        throw new Error();
    }

    return resData.client;
}

clientDataStyling.js

import { fetchClientData } from "./http";

let FCDStylingObj;

async function fetchClientAPIStyling() {
    try {
        const FCDStyling = await fetchClientData();
        FCDStylingObj = {
            fetchPrimary400: FCDStyling[0].colors.primary400,
        }
        var getFCDStylingObj = await FCDStylingObj.fetchPrimary400;
        return getFCDStylingObj;

    } catch (error) {
        console.log('Error message | ' + error);
    }
}

let clientStyling = fetchClientAPIStyling();

clientStyling.then(function (result) {
    return result;
})

export const CLIENT_DATA = {
    colors: {
        primary400: clientStyling
    },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */

import { CLIENT_DATA } from './src/clientDataStyling';

console.log(CLIENT_DATA.colors.primary400);

export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            fontFamily: {
                title: "Poppins, sans-serif",
                body: "Poppins, sans-serif"
            },
            colors: {
                primary100: "#b8ace860",
                primary200: "#6e56a1c4",
                primary300: "#644b99",
                // primary400: "#392976",
                primary400: CLIENT_DATA.colors.primary400,
                secondary: "#e372a9",
                third: "#3eb392",
                success: "#3eb392",
                error: "#f94b4b"
            },

            borderWidth: {
                global: "1px"
            },

            borderRadius: {
                global: "5px"
            },

            transitionDuration: {
                global: "300ms"
            }
        },
    },
    plugins: [],
}

Any help would be grateful as I’ve been going around in circles these past couple of days! Or if there’s any other CSS framework that’ll work for what I’m trying to achieve.