vue.js 如何从javascript访问顺风颜色

c3frrgcw  于 2022-12-14  发布在  Vue.js
关注(0)|答案(3)|浏览(132)

我正在使用ApexCharts,并希望使用我的顺风颜色(红色-500等)来设计我的图表。我不能使用css类(所以不能在后css环境中使用theme())。
我也不能引用默认配置,因为我已经扩展了它。
我可以导入我新配置的颜色,但这似乎不是一个好的方法(此外,一些css类可以用实用程序生成,并且不能用这种方法访问)。我还提出了一个理论,我可以添加一个隐藏的html元素到我的DOM,从它那里获得css属性,然后删除,但这似乎也是一个坏的方法。

ki0zmccv

ki0zmccv1#

查看官方文件:https://tailwindcss.com/docs/configuration#referencing-in-java-script
您可以使用内置的helper resolveConfig来获取您的配置。

ktca8awb

ktca8awb2#

import colors from 'tailwindcss/colors'
const green = colors.green[600] // #16a34a
k5ifujac

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]} />

相关问题