I'm currently struggling with inputting the configuration file for Tailwind. Despite my efforts, I cannot seem to get it right. The code appears correct to me, but I am unsure of what mistake I might be making.
Below is the snippet of 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;
With regards to the addVariant line, an error message is appearing:
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 only got 0.ts(2345)
Despite indicating that it expects the className parameter, the issue persists.
As for the modifySelectors line, another error arises:
Argument of type '({ className }: modifySelectorsProps) => string' is not assignable to a type of 'string'.ts(2345)
This problem disappears when I maintain this type and eliminate the type declaration from the line above.