Dynamic colors in tailwind css

Question

Is it possible to make the color dynamic in tailwind config.

I want to received the desired color for (primary , accent) from backend via api.

So the user can change the color from the admin panel.

i want to get this hex value from api

Answer 1

You can try fetching the CSS variables to change you color palette without changing tailwind.config.js

config file:

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary": {
            100:"var(--primary-color-100)",
            200:"var(--primary-color-200)",
           },
        "accent": "var(--accent-color)"
      },
    },
  },
};

css file:

:root {
  --primary-color-100: #fff;
  --primary-color-200: #fff00;
  --accent-color: #000;
}

Answer 2

Yes this is possible but instead of only primary, you need to return the complete string like bg-primary(as tailwind only recognises the string) where your primary color should be defined in tailwind.config.js file.

For an example you can refer to my answer for this question.