Tailwind自定义插件失效求助（addUtilities等方法无作用）

你的问题出在插件的导入路径错误，Tailwind的插件构造函数并不是从主包tailwindcss导出的，必须从tailwindcss/plugin路径导入。

修正步骤： #

1. 修改tailwind.config.js中的导入语句：
   把

   import plugin from 'tailwindcss';
   

   改成

   import plugin from 'tailwindcss/plugin';
   

2. 重新运行你的Tailwind构建命令：

   npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
   

修正后的完整tailwind.config.js： #

import plugin from 'tailwindcss/plugin';

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,tsx}"],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    }
  },
  plugins: [
    plugin(function ({ addComponents, addUtilities }) {
      addUtilities({
        '.test-1': { 
          background: 'red'
        },
      });
      addComponents({
        '.test-2': { 
          background: 'cyan'
        },
      });
    }),
  ],
}

为什么之前的代码无效？ #

你之前导入的plugin其实是Tailwind的主包对象，不是用来创建自定义插件的函数。当你调用这个错误的plugin函数时，Tailwind无法识别你注册的addUtilities和addComponents逻辑，自然不会生成对应的CSS选择器。

修正后，output.css里就会正常生成.test-1和.test-2的样式了。

内容的提问来源于stack exchange，提问作者Wirbelwind