2

I am trying to use custom color names defined in my tailwind.config.js in namespace data.datasets.backgroundColor for my doughnut chart component in react-chartjs-2. However, it is not working. Is there some way I can easily use the Tailwind names without having to use their hex values?

FYI, it works perfectly with the hex values, but I was just wondering if there's a way to just use the Tailwind names.

Custom colors defined in tailwind.config.js:

cc1: '#0099CC',
cc2: '#ED1A37',

My chart.js data variable:

const data = {
    labels: ...
    datasets: [
      {
        data: ...
        backgroundColor: ['cc1', 'cc2']
        offset: ...
      },
    ],
  };

// backgroundColor is invalid
jzlong
  • 21
  • 2
  • You might consider using CSS variables for your colors and then using the variables to set the colors in your `tailwind.config.js` (if they're used for non-chart styles) and your chart.js `data`. For using CSS vars in chart.js, see: https://stackoverflow.com/questions/49208780/using-css-variables-color-with-chart-js-var-primarycolor-not-working – Ed Lucas Aug 17 '22 at 16:11

1 Answers1

1

You need to import "tailwindcss/colors" then use as colors.something

import colors from "tailwindcss/colors";
    
  const data = {
  labels: ...
  datasets: [
    {
      data: ...
      backgroundColor: [colors.zinc[200], colors.primary[500], colors.gray[800]]
      offset: ...
    },
   ],
 };

// backgroundColor is invalid

Example tailwind.config.js

    theme: {
    colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        blue: colors.blue,
        orange: colors.orange,
        amber: colors.amber,
        lime: colors.lime,
        white: colors.white,
        gray: colors.gray,
        zinc: colors.zinc,
        indigo: colors.indigo,
        green: colors.emerald,
        red: colors.rose,
        yellow: colors.amber,
        sky: colors.sky,
        slate: colors.slate,
        neutral: colors.neutral,
        stone: colors.stone,
        darkblue: {
            "50": "#DBE2FF",
            "100": "#BDC9FF",
            "200": "#7A93FF",
            "300": "#3358FF",
            "400": "#002CF0",
            "500": "#0020AD",
            "600": "#00198A",
            "700": "#001366",
            "800": "#000D47",
            "900": "#000724"
        },
        cream: {
            "50": "#E3EEF2",
            "100": "#CBDFE7",
            "200": "#93BDCD",
            "300": "#5a5a5a",
            "400": "#4a4a4a",
            "500": "#303030",
            "600": "#242424",
            "700": "#232323",
            "800": "#191919",
            "900": "#131313"
        }
    },
Erenn
  • 625
  • 6
  • 18
  • I think this only works with the default colors provided by Tailwind? I'm trying to use custom color names – jzlong Aug 17 '22 at 07:53
  • `color.darkblue[500]` is not default for example and you can use it as bg color as in the answer. – Erenn Aug 17 '22 at 07:56
  • Did you make it work? We use above code to draw our charts with tailwind colors. – Erenn Aug 17 '22 at 08:23
  • @No, it doesn't work on my own colors, even after defining them in themes.colors this is what I get with your method: Property 'cc1' does not exist on type 'DefaultColors' – jzlong Aug 17 '22 at 09:08
  • 1
    Just console log the imported colors and check the properties. `console.log(colors)` – Erenn Aug 17 '22 at 10:21
  • You are right. Only default colors are coming this way. You need to do something like this. https://github.com/tailwindlabs/tailwindcss.com/issues/765 – Erenn Aug 17 '22 at 11:27
  • How to do this in React? I'm new to web development so how is that webpack config working – jzlong Aug 31 '22 at 09:14