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

Posted 2023-03-07

【中文标题】如何在 tailwindcss 中为 plugin.withOptions 使用 theme()

【英文标题】：How to use theme() for plugin.withOptions in tailwindcss

【发布时间】：2021-07-07 08:28:55

【问题描述】：

所以我想用这个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'),
      ,
    )),
  ],

【参考方案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'),
    // ...
  ],

【讨论】：

我使用 withOptions 是因为我认为该主题仅适用于除 DEFAULT 之外还需要添加更多样式的情况。谢谢解释