Custom color name

[trompx]

Hi,

In a bar chart (and any charts), I'd like to use custom colors.
As mentioned in the docs here, it is possible to add hex colors. But I'd like to add colors and specify them by name, also with weights, like mycolor-100, mycolor-200.

I didn't find a way to use custom color by name, is it possible or only by hex number?

When in a component, it's not convenient to have to check which hex corresponds to the color I want to apply so having name would be very useful.

[AikoRamalho]

This seems rather a problem with your tailwindcss.config.js file than with the library.

Either way, you are able to archive this by:

1. Creating a color inside theme.extend.colors:

mycolor: {
    100: "#722ed1",
    200: "#B37FEB",
},

2. Adding the following snippet on safelist:

...["mycolor-100", "mycolor-200"].flatMap((customColor) => [
      `bg-${customColor}`,
      `border-${customColor}`,
      `hover:bg-${customColor}`,
      `hover:border-${customColor}`,
      `hover:text-${customColor}`,
      `fill-${customColor}`,
      `ring-${customColor}`,
      `stroke-${customColor}`,
      `text-${customColor}`,
      `ui-selected:bg-${customColor}`,
      `ui-selected:border-${customColor}`,
      `ui-selected:text-${customColor}`,
    ]),

[trompx]

Thanks a lot for the feedback @AikoRamalho.
Yeah I don't know what was wrong, I upgraded versions and it is working fine now.
But really appreciate the help!