我正在使用ApexCharts，并希望使用我的顺风颜色（红色-500等）来设计我的图表。我不能使用css类（所以不能在后css环境中使用theme（））。我也不能引用默认配置，因为我已经扩展了它。我可以导入我新配置的颜色，但这似乎不是一个好的方法（此外，一些css类可以用实用程序生成，并且不能用这种方法访问）。我还提出了一个理论，我可以添加一个隐藏的html元素到我的DOM，从它那里获得css属性，然后删除，但这似乎也是一个坏的方法。
ki0zmccv1#
查看官方文件：https://tailwindcss.com/docs/configuration#referencing-in-java-script您可以使用内置的helper resolveConfig来获取您的配置。
resolveConfig
ktca8awb2#
import colors from 'tailwindcss/colors' const green = colors.green[600] // #16a34a
k5ifujac3#
编辑：导入颜色（包括扩展颜色）的快捷方法：
import resolveConfig from 'tailwindcss/resolveConfig' import tailwindConfig from 'path/to/your/tailwind.config.js' const fullConfig = resolveConfig(tailwindConfig) console.log(fullConfig.theme.colors.myCustomColor[50])
来源：https://www.javascriptguides.com/how-to-access-tailwind-css-colors-from-javascript/@mrp的回答是伟大的，如果你想走官方路线，但是，我不想经历的麻烦，添加另一个巴别塔插件.相反，您可以在https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js处引用它们的颜色然后在常量文件中创建导出，即
export default { inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', }, ... }
然后你就可以这样做。
import COLORS from 'constants/colors' <Icon color={COLORS.emerald[700]} />
3条答案
按热度按时间ki0zmccv1#
查看官方文件：https://tailwindcss.com/docs/configuration#referencing-in-java-script
您可以使用内置的helper
resolveConfig来获取您的配置。ktca8awb2#
k5ifujac3#
编辑：导入颜色（包括扩展颜色）的快捷方法：
来源：https://www.javascriptguides.com/how-to-access-tailwind-css-colors-from-javascript/
@mrp的回答是伟大的，如果你想走官方路线，但是，我不想经历的麻烦，添加另一个巴别塔插件.
相反，您可以在https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js处引用它们的颜色
然后在常量文件中创建导出，即
然后你就可以这样做。