Is it possible to use transformer-variant-group as plugin in Tailwind CSS?

[cawa-93]

I am forced to use tailwind, since it is "mainstream" and already added to the project. In addition, it has better support from editors. However, I really miss some features in it such as variant grouping.

Is it possible to somehow use transformer-variant-group as plugin in Tailwind CSS?

[zyyv]

In fact, transformer-variant-group exists only as a transformer, which runs in the vite plugin. If your project supports vite, you can give it a try.
You can also check the source code of transformer-variant-group and @unocss/vite, extract the parts that are useful to you, and then write a plugin to use.

[cawa-93]

It's kinda work

// vite.config.js
import { expandVariantGroup } from '@unocss/core'

export default {
	plugins: [{
	    name: '@unocss/transformer-variant-group',
	    enforce: 'pre',
	    transform(s) {
	      return expandVariantGroup(s)
	    },
	}]
}