typescriptnext.jstailwind-css

Tailwind addVariant typing


I'm trying to type Tailwind's config file but I can't get it right for the life of me. It looks correct to me and I don't know what I'm doing wrong.

Here's my code:

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

interface Props {
  modifySelectors: (className: string) => string;
  separator: string;
}
interface modifySelectorsProps {
  className: string;
}

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 }) => {
      addVariant("label-checked", ({ modifySelectors, separator }: Props) => {
        modifySelectors(({ className }: modifySelectorsProps) => {
          const eClassName = e(`label-checked${separator}${className}`);
          const yourSelector = 'input[type="radio"]';
          return `${yourSelector}:checked ~ .${eClassName}`;
        });
      });
    })
  ]
};
export default config;

For the addVariant line, I'm getting this error:

Argument of type '({ modifySelectors, separator }: Props) => void' is not assignable to parameter of type 'string | string[] | (() => string) | (() => string)[]'.
  Type '({ modifySelectors, separator }: Props) => void' is not assignable to type '() => string'.
    Target signature provides too few arguments. Expected 1 or more, but got 0.ts(2345)

Even though I'm declaring that it expects the className parameter.

And for the modifySelectors line, I'm getting:

Argument of type '({ className }: modifySelectorsProps) => string' is not assignable to parameter of type 'string'.ts(2345)

This one goes away if I keep this type and remove the type from the line above.


Solution

  • It looks like you are using the tailwind v2 API for plugins, which changed in v3.

    You'll need to make this plugin use the version 3 plugin API to make your plugin work with modern tailwind installations