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