从尾风中的库中添加插件

Question

我正在使用React，NX，Tailwind来创建一个带有多个配置

MonorePo

的 每个项目一个配置 一个扩展每个LIB项目配置的插件。

我目前有以下内容：

root :: tailwind.config（基本样式）

module.exports = {
  content: [],
  theme: {
    extend: {
      colors: {
        '27313B': '#27313B',
      },
    },
  },
  plugins: [],
};

project :: tailwdind.config（扩展了root并呼叫插件）

const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  presets: [require(join(__dirname, '../../tailwind.config'))],
  theme: {
    extend: {},
  },
  plugins: [require(join(__dirname, '../../libs//tailwind.plugin'))],
};

lib：lib： ：tailwind.plugin

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(
      function ({ matchUtilities, theme }) {
        matchUtilities(
          {
            colors: (value) => ({
              colors: value,
            }),
          },
          { values: theme('colors') }
        );
      },
      {
        theme: {
          extend: {
            colors: {
              F00: '#f00',
            },
          },
        },
      }
    ),
  ],
};

可悲的是，插件永远无法使用，

这样做 ＆lt; div className = {'text-27313b'}＆gt; asdasd＆lt;/div＆gt; 显示好的颜色，但 ＆lt; div className = {'text-f00'}＆gt; asdasd＆lt;/div＆gt; 我不

配置错误吗？

Answer 1

你尝试这个

 module.exports = {
      content: [],
      theme: {
        extend: {
          colors: {
            27313B: '#27313B',
          },
        },
      },
      plugins: [],
    };

Answer 2

好的，我复制了错误的粘贴...

module.exports = plugin(
  function ({ matchUtilities, theme }) {
    matchUtilities(
      {
        colors: (value) => ({
          colors: value,
        }),
      },
      { values: theme('colors') }
    );
  },
  {
    theme: {
      extend: {
        colors: {
          F00: '#f00',
        },
      },
    },
  }
);

工作。

我正在导出一个插件：plugin（），而不是只是插件（）