我正在使用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处引用它们的颜色
然后在常量文件中创建导出,即
然后你就可以这样做。