Missing support for stacking pseudo classes

[bstro]

Environment:

• TailwindCSS version: ^3.0.15
• tailwindcss-classnames version: ^3.0.2
• Node.js version: 14.17

Current Behavior

Using a multiple pseudo classes together throws a type error.
In this case, I attempted to combine hover:… and active:….

Expected Behavior

I should be able to stack pseudo classes in this way with no type-errors.

• I've searched the issues list and this is not a duplicate
• I'm willing to fix this error

[muhammadsammy]

Honestly, I do not know how to support this feature + it would generate a huge number of classnames types that the TS engine could not handle, that's why support for opacity suffix feature was also dropped
#315

[bstro]

Ah, that makes sense. Is there any kind of escape hatch helper so that I could still use classes like active:hover:… without the type system yelling at me? Something like classnames(backgroundColor('bg-gray-100'), unsafe('active:hover:bg-gray-200)

[muhammadsammy]

yes, you can cast the string to TTailwindString type:

backgroundColor('bg-gray-100', 'active:hover:bg-gray-200' as TTailwindString)

[bstro]

How would one do that in the case of conditionals?

  backgroundColor({
    ['active:hover:bg-gray-200' as TTailwindString]: someConditionalActiveStateBool
  })

I spose? I'll write my own helper probably for this case.

Thanks for your help!

[bstro]

also p.s. thanks for building this, i'm finding it super helpful. 💚