[V4] Migration impossible for these custom variants (Add EM Variant and some utility)

[qlaffont]

Hello I'm trying to migrate to v4, but it is impossible to convert this to v4 (I have tried). Can someone confirm it ?

/** @type {import('tailwindcss').Config} */

module.exports = {
	plugins: [
		// 'em' style (complémentaire au 'rem' par défaut)
		require('tailwindcss/plugin')(function ({ addVariant }) {
			addVariant('em', ({ container }) => {
				container.walkRules((rule) => {
					rule.selector = `.em\\:${rule.selector.slice(1)}`;
					rule.walkDecls((decl) => {
						decl.value = decl.value.replace('rem', 'em');
					});
				});
			});
		}),
		function customVariants({ addVariant, matchVariant }) {
			// Strict version of `.group` to help with nesting.
			matchVariant('parent-data', (value) => `.parent[data-${value}] > &`);
		},
	],
};

Thanks !

[peter247smith]

Hello,

I have some solution maybe it helps you.

Tailwind v4 Plugin Changes

Tailwind v4 introduces significant changes to how plugins work.
The matchVariant function has been replaced with addVariant, which now supports complex variants.
Possible Issues
myfordbenefits
The require('tailwindcss/plugin') function usage is likely outdated in v4.
The way addVariant processes container.walkRules might not be compatible.
matchVariant has been removed and replaced with addVariant, requiring a different approach.
Possible Solution (Converted for v4)
Try rewriting your configuration like this:

js
Edit
/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin');

module.exports = {
plugins: [
// 'em' style variant
plugin(function ({ addVariant }) {
addVariant('em', '&:em', ({ container }) => {
container.walkRules((rule) => {
rule.selector = .em\\:${rule.selector.slice(1)};
rule.walkDecls((decl) => {
decl.value = decl.value.replace('rem', 'em');
});
});
});
}),
// Custom variants
plugin(function ({ addVariant }) {
addVariant('parent-data', (value) => :is(.parent[data-${value}] > &));
}),
],
};
Key Fixes
Used plugin(function({ addVariant }) { ... })

This follows the new Tailwind v4 syntax.
Replaced matchVariant with addVariant

matchVariant is removed in v4. Instead, addVariant should be used with a function.
Ensured parent-data variant works

Replaced the old matchVariant syntax with :is(.parent[data-${value}] > &).
What to Test?
Run tailwindcss --watch and check if your styles compile correctly.
Try applying .em:text-lg and .parent[data-test] > .child-class in HTML to verify if the variants work.

Best Regards

[Kiyozz]

None of your suggestions works. addVariant does not expect a callback in the second argument, nor in the third.