Estoy tratando de usar nombres de colores personalizados definidos en mi tailwind.config.js en el espacio de nombres data.datasets.backgroundColor para mi componente de gráfico de anillos en react-chartjs-2. Sin embargo, no está funcionando. ¿Hay alguna manera de que pueda usar fácilmente los nombres de Tailwind sin tener que usar sus valores hexadecimales?
FYI, funciona perfectamente con los valores hexadecimales, pero me preguntaba si hay una manera de usar los nombres de Tailwind.
Colores personalizados definidos en tailwind.config.js :
cc1: '#0099CC', cc2: '#ED1A37', Mi variable data chart.js:
const data = { labels: ... datasets: [ { data: ... backgroundColor: ['cc1', 'cc2'] offset: ... }, ], }; // backgroundColor is invalidDebe importar "tailwindcss/colors" y luego usarlo como 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 invalidEjemplo 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" } },