[英]How to access tailwind colors from javascript
I am using ApexCharts and would like to use my tailwind colors (red-500, etc) to style my chart.我正在使用 ApexCharts,并想使用我的顺风 colors(red-500 等)来设置我的图表样式。 I can't use css classes (so can't use theme() in a post-css context).我不能使用 css 类(所以不能在 post-css 上下文中使用 theme() )。 I also can't reference the default config because I have extended it already.我也无法引用默认配置,因为我已经对其进行了扩展。 I could import my new config's colors, however this does not seem like a good way to do it (besides, some css classes could be generated with utilities, and would not be accessible this way).我可以导入我的新配置的 colors,但这似乎不是一个好方法(此外,可以使用实用程序生成一些 css 类,并且无法通过这种方式访问)。 I have also theorized that I could add a hidden html element to my dom, get the css property from it and then remove, but this also seems like a bad approach.我还推测我可以在我的 dom 中添加一个隐藏的 html 元素,从中获取 css 属性然后删除,但这似乎也是一个不好的方法。
Thanks CoffeeKing68感谢 CoffeeKing68
Check the official docs: https://tailwindcss.com/docs/configuration#referencing-in-java-script查看官方文档: https://tailwindcss.com/docs/configuration#referencing-in-java-script
You can use the built-in helper resolveConfig
to get your config.您可以使用内置帮助器resolveConfig
来获取您的配置。
import colors from 'tailwindcss/colors' const green = colors.green[600] // #16a34a
You could put tailwind colors into css variables, that are accessible from JavaScript.您可以将顺风 colors 放入 css 变量中,这些变量可从 JavaScript 访问。
@mrp's answer is great if you want to go the official route.如果您想 go 官方路线,@mrp 的回答很棒。 However, I didn't want to go through the trouble of adding another babel plugin to minimize the bundle load.但是,我不想通过添加另一个 babel 插件来最小化捆绑负载的麻烦来 go。
Instead, you can just reference their colors at https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js相反,您可以在https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js参考他们的 colors
Then create an export in constants file ie然后在常量文件中创建一个导出,即
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',
},
...
}
and then you can just do eg然后你可以做例如
import COLORS from 'constants/colors'
<Icon color={COLORS.emerald[700]} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.