Javascript 如何在tailwindcss中为plugin.withOptions使用theme()
所以我想使用这个tailwindcss插件,我需要自定义颜色。 这是基于Javascript 如何在tailwindcss中为plugin.withOptions使用theme(),javascript,tailwind-css,Javascript,Tailwind Css,所以我想使用这个tailwindcss插件,我需要自定义颜色。 这是基于 module.exports={ // ... 插件:[ 需要(“@gradin/tailwindcss滚动条”)({ 颜色:{ 曲目:“浅灰色”, 拇指:“灰色”, 拇指悬停:“暗射线”, }, }), ], } 但我想使用主题中的颜色。这两个都不起作用,我仍然得到插件的默认配置 module.exports={ // ... 插件:[ 需要(“@gradin/tailwindcss滚动条”)({ 颜色:主题=>({
module.exports={
// ...
插件:[
需要(“@gradin/tailwindcss滚动条”)({
颜色:{
曲目:“浅灰色”,
拇指:“灰色”,
拇指悬停:“暗射线”,
},
}),
],
}
但我想使用主题中的颜色。这两个都不起作用,我仍然得到插件的默认配置
module.exports={
// ...
插件:[
需要(“@gradin/tailwindcss滚动条”)({
颜色:主题=>({
曲目:主题('colors.gray.200'),
thumb:theme('colors.primary.200'),
thumbHover:theme('colors.primary.500'),
}),
}),
],
}
module.exports={
// ...
插件:[
需要(“@gradin/tailwindcss滚动条”)(主题=>({
颜色:{
曲目:主题('colors.gray.200'),
thumb:theme('colors.primary.200'),
thumbHover:theme('colors.primary.500'),
},
})),
],
}
我可以看出你实际上是这个插件的作者,插件是问题,而不是顺风配置
在plugin source中,您使用了plugin.withOptions
来制作主题,这是错误的。在tailwind配置中已经有了“主题”部分,这是所有主题选项都应该去的地方,对于插件也是如此
插件“选项”仅用于非常特定的选项,如前缀类等,不用于样式设置
发件人:
有时,插件可以通过以下方式进行配置:
不属于主题或变体,就像你想要的那样
用户可以自定义插件使用的类名
对于这种情况,可以使用plugin.withOptions定义插件
可以使用配置对象调用的
看看其他插件,例如
我使用withOptions是因为我认为该主题仅适用于除了默认样式之外还需要添加更多样式的情况。谢谢你的解释
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
a: {
color: '#3182ce',
'&:hover': {
color: '#2c5282',
},
},
},
},
}
},
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}