如何从 javascript 访问顺风颜色

Question

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

谢谢 CoffeeKing68

Answer 1

您可以将顺风颜色放入 css 变量中，这些变量可从 JavaScript.

访问

Answer 2

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

您可以使用内置助手 resolveConfig 获取您的配置。

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

Answer 4

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

如何从 javascript 访问顺风颜色

How to access tailwind colors from javascript

javascript

vue.js

tailwind-css