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.
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