`group-hover` (and probably other variants with dash) produces invalid elm

[choonkeat]

<span class="group-hover:text-gray-900">hello</span>

produces

    span
        [ css
            [ Bp.group-hover
                [ Tw.text_gray_900
                ]
            ]
        ]
        [ text "hello" ]

where group-hover isn't valid elm function name

ref https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

[dillonkearns]

The group ones are unfortunate because there's no elm-tailwind-modules equivalent for that. Not sure what the best thing to do for those is, could be adding a no-op or something like that 🤷‍♂️

[choonkeat]

Another option is to approach is like a user of elm-tailwind-modules

• use the Tw functions where possible
• leave it as class name otherwise

<span class="text-gray-500 group-hover:text-gray-900">hello</span>

with Use tailwind classes = OFF

    span
        [ Attr.class "text-gray-500 group-hover:text-gray-900"
        ]
        [ text "hello" ]

with Use tailwind classes = ON

    span
        [ css
            [ Tw.text_gray_500
            ]
        , Attr.class "group-hover:text-gray-900"
        ]
        [ text "hello" ]

wdyt?

[dillonkearns]

It's an interesting idea, but I imagine most people won't have Tailwind in their setup at all if they're using elm-tailwind-modules so I think this would be confusing.

The fact that it results in something with a compiler error might be better than that because it won't silently fail at least. A Debug.todo or something along those lines would be another way to go I think. Ideally we could figure out how to get that behavior with elm-tailwind-modules, if that's at all possible.