[Chartjs]-Use custom Tailwind color names as inputs to chart.js backgroundColor of chart

by

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"
        }
    },

Leave a comment