CODEWITHSUNDEEP
tailwind-css
Ali Aljonde
Ali Aljonde

Reputation: 137

Dynamic colors in tailwind css

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 i want to get this hex from api

Upvotes: 11

Views: 20915

Answers (3)

Renan Passos
Renan Passos

Reputation: 31

If you think that in your application it is possible to get just the name of a predefined color palette instead of getting all CSS variables, you can try this package:

https://www.npmjs.com/package/tw-colors

This automates the creation of CSS variables according to the current theme and also gives the names of the colors you want in the tailwind, always updated with the current theme. But I don't know if you can define a new palette at runtime.

Upvotes: 0

saboshi69
saboshi69

Reputation: 895

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;
}

Upvotes: 13

MagnusEffect
MagnusEffect

Reputation: 3925

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.

Upvotes: 3

Related Questions