Tailwind CSS配置文件类型定义报错：addVariant类型不匹配

错误原因分析 #

1. addVariant参数类型不匹配：你自定义的Props接口不符合Tailwind插件addVariant方法的参数类型要求，Tailwind期望的回调参数是内置的VariantConfig类型，而非你定义的结构。
2. modifySelectors回调参数错误：modifySelectors的回调函数接收的是字符串类型的className，而非包含className的对象，你定义的modifySelectorsProps接口完全多余。

修正后的代码 #

import type { Config } from "tailwindcss";
import formsPlugin from "@tailwindcss/forms";
import type { PluginAPI, VariantConfig } from "tailwindcss/plugin";
import plugin from "tailwindcss/plugin";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/layouts/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  plugins: [
    formsPlugin,
    plugin(({ addVariant, e }: PluginAPI) => {
      addVariant("label-checked", ({ modifySelectors, separator }: VariantConfig) => {
        modifySelectors((className: string) => {
          const eClassName = e(`label-checked${separator}${className}`);
          const yourSelector = 'input[type="radio"]';
          return `${yourSelector}:checked ~ .${eClassName}`;
        });
      });
    })
  ]
};
export default config;

关键修改点 #

• 导入Tailwind插件的内置类型PluginAPI和VariantConfig，替代自定义接口，确保类型完全匹配。
• 将modifySelectors的回调参数从对象改为字符串类型的className，符合Tailwind的调用规范。
• 为插件的回调函数参数指定PluginAPI类型，让addVariant和e方法获得正确的类型提示。

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