如何从javascript访问顺风颜色

Question

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

谢谢 CoffeeKing68

Answer 1

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

这仅适用于默认的 Tailwind 颜色

Answer 2

编辑：导入颜色（包括扩展颜色）的快速简便方法：

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 的回答很好。然而，我不想经历添加另一个 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 3

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

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