将Tailwind自定义插件移至TS文件遇类型错误，求解决方案示例

云原生阿岚

2026-7-18

解决Tailwind自定义插件TypeScript类型问题

问题核心

你遇到的PluginCreator找不到的问题，是因为这个类型并非直接暴露在tailwindcss主模块下，而是需要从tailwindcss/types路径导入；另外用require导入plugin函数会丢失类型，推荐用ES模块导入来获得完整类型支持。

完整示例代码

1. 自定义插件TS文件（比如`src/plugins/custom-plugin.ts`）

// 从正确路径导入类型和plugin函数
import type { PluginCreator } from 'tailwindcss/types';
import plugin from 'tailwindcss/plugin';

// 用PluginCreator约束插件函数类型
const customPlugin: PluginCreator = ({ addUtilities, addComponents, theme }) => {
  // 添加自定义工具类
  addUtilities({
    '.text-shadow': {
      textShadow: `0 2px 4px ${theme('colors.black/20')}`,
    },
  });

  // 添加自定义组件
  addComponents({
    '.btn-custom': {
      padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
      borderRadius: theme('borderRadius.md'),
      backgroundColor: theme('colors.blue.600'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.700'),
      },
    },
  });
};

export default customPlugin;

2. 在Tailwind配置文件中使用插件

// tailwind.config.ts
import customPlugin from './src/plugins/custom-plugin';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [customPlugin],
};

若坚持使用require的兼容写法

如果你的项目还在使用CommonJS规范，可通过以下方式修复类型：

// custom-plugin.cjs
const plugin = require('tailwindcss/plugin');
// 从types模块导入PluginCreator类型
const { PluginCreator } = require('tailwindcss/types');

/** @type {PluginCreator} */
const customPlugin = plugin(({ addUtilities }) => {
  addUtilities({
    '.text-shadow': {
      textShadow: '0 2px 4px rgba(0,0,0,0.2)',
    },
  });
});

module.exports = customPlugin;