如何从javascript访问顺风颜色答案

【问题标题】：How to access tailwind colors from javascript如何从javascript访问顺风颜色
【发布时间】：2020-07-21 21:21:54
【问题描述】：

我正在使用 ApexCharts，并希望使用我的顺风颜色（红色 500 等）来设置我的图表样式。我不能使用 css 类（所以不能在 post-css 上下文中使用 theme() ）。我也无法引用默认配置，因为我已经对其进行了扩展。我可以导入我的新配置的颜色，但这似乎不是一个好方法（此外，一些 css 类可以使用实用程序生成，并且无法通过这种方式访问）。我还推测我可以向我的 dom 添加一个隐藏的 html 元素，从中获取 css 属性然后删除，但这似乎也是一种不好的方法。

谢谢咖啡王68

【问题讨论】：

标签： javascript vue.js tailwind-css

【解决方案1】：

查看官方文档：https://tailwindcss.com/docs/configuration#referencing-in-java-script

您可以使用内置帮助器resolveConfig 来获取您的配置。

【讨论】：

谢谢，这应该被标记为接受的答案

【解决方案2】：

您可以将顺风颜色放入可从 JavaScript 访问的 css 变量中。

【讨论】：

我最终使用了这个插件github.com/omarkhatibco/tailwind-css-variables 并且效果很好，谢谢！

【解决方案3】：

如果你想走官方路线，@mrp 的回答很棒。但是，我不想麻烦地添加另一个 babel 插件来最小化捆绑包的负载。

相反，您可以在 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]} />

【讨论】：