How to apply variants to a custom variant

[tbetous]

Hi ! 👋

First of all, thanks for your amazing work. I love tailwindcss and this is the best css tool I have seen so far ! I am actually facing a problem trying to write a plugin to add hover and pointer media queries. Here is an example :

addVariant('hover-none', ({ container, separator }) => {
    const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
    hoverNone.append(container.nodes)
    container.append(hoverNone)
    hoverNone.walkRules(rule => {
         rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
    })
})

The goal of this is to generate this kind of css :

@media (hover: none) {
    // CSS
}

It works well with class like hover-none:bg-white, however if I add another variant like hover-none:hover:bg-white, it does not work. Is there a better way to do this ?

Anyoine can help me ?

Note : I saw the classes like sm:hover:bg-white works what is strange because behind the sm it is also a media query. May be it work differently.

[danimalweb]

Also seeking an answer to this question!

[lukewarlow]

At the top of your tailwind.config.js file put:

const plugin = require('tailwindcss/plugin');
const { transformLastClasses } = require('tailwindcss/lib/util/pluginUtils')

And in the plugin: [] section of your config add the below code snippet.

plugin(function ({ addVariant, config, postcss }) {
	addVariant(
		'hover-none',
		transformLastClasses(
			(className) => {
				return `hover-none${config('separator')}${className}`
			},
			{
				wrap: () =>
					postcss.atRule({
						name: 'media',
						params: '(hover: none)',
					}),
			}
		),
	)
})

This should work as you want with other variants.