Create a custom variant that prepends to state variants

[aerni]

I created a pretty straight forward plugin that adds a custom rfs variant. I need this custom variant to behave like the responsive and dark variants do. Meaning, I also need classes to be generated for all the state variants on top of the custom variant.

In my tailwind.config.js:

variants: {
    extend: {
        padding: ['rfs', 'first'],
    },
},

This generates classes like this:

.rfs\:p-6 {
    padding: calc(1.275rem + 0.3vw);
}

.first\:p-6:first-child {
    padding: 1.5rem;
}

I also need state variant classes to be generated on top of the rfs variant like this:

.rfs\:first\:p-6:first-child {
    padding: calc(1.275rem + 0.3vw);
}

When source diving Tailwind's code, I came across this file that seems to handle stacking the variants.

I'm not sure if there's an easy way to make this work inside a variant plugin?

[adamwathan]

Hey! We have an unstable experimental option for this right now that you can play with if you like, just need to pass a third arg to addVariant:

addVariant('rfs', () => { ... }, { unstable_stack: true })

We use this internally for the dark mode and motion-safe/reduce variants.

[aerni]

Sweet thanks! Will give this a shot.

[aerni]

Alright, I tested it. This almost works precisely how I need it to. The only gotcha I came across is that it doesn't add any dark variants to the stack when unstable_stack: true. If I remove unstable_stack: true, I get the dark variants but no stacked state variants like first.