如何在 tailwindcss 中为 plugin.withOptions 使用 theme()

Question

所以我想用这个tailwindcss插件，我需要自定义颜色。 这是基于tailwindcss docs。

module.exports = {
  // ...
  plugins: [
    require('@gradin/tailwindcss-scrollbar')({
      colors: {
        track: 'lightgray',
        thumb: 'gray',
        thumbHover: 'darkgray',
      },
    }),
  ],
}

但我想使用主题中的颜色。这两个都不起作用，我仍然得到插件默认配置。

module.exports = {
  // ...
  plugins: [
    require('@gradin/tailwindcss-scrollbar')({
      colors: theme => ({
        track: theme('colors.gray.200'),
        thumb: theme('colors.primary.200'),
        thumbHover: theme('colors.primary.500'),
      }),
    }),
  ],
}

module.exports = {
  // ...
  plugins: [
    require('@gradin/tailwindcss-scrollbar')(theme => ({
      colors: {
        track: theme('colors.gray.200'),
        thumb: theme('colors.primary.200'),
        thumbHover: theme('colors.primary.500'),
      },
    })),
  ],
}

Answer 1

我可以看到你实际上是这个插件的作者，插件是问题，而不是顺风配置。

在插件源中您使用plugin.withOptions 进行主题化，这是错误的。在顺风配置中已经有“主题”部分，这是所有主题选项应该去的地方，也适用于插件。

插件“选项”仅用于非常特定的选项，例如前缀类等，而不用于样式。

来自docs：

有时，可以通过以下方式配置插件是有意义的 并不真正属于主题或变体，就像你想要的那样 用户可以自定义插件使用的类名。

对于这样的情况，你可以使用 plugin.withOptions 来定义一个插件 可以通过配置对象调用。

看看其他插件，例如。 tailwindcss-typography

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}