Incorrect Tailwind classes produced

[synalysis]

When converting a TailwindUI module I noticed three problems.

The HTML <button type="button" class="dark:md:bg-slate-800/75 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 [.dark[data-theme=system]_&amp;]:block [[data-theme=light]_&amp;]:block"></button> produces

    button
        [ Attr.type_ "button"
        , css
            [ Tw.
            , Tw.
            , Bp.[.dark[data-theme=system]_&]
                [ Tw.block
                ]
            , Bp.[[data-theme=light]_&]
                [ Tw.block
                ]
            , Bp.dark
                [ Bp.dark
                    [ Tw.bg_slate_800over75
                    ]
                ]
            ]
        ]
        []

There are three issues:

• missing Tailwind classes
• Bp.dark twice instead of Bp.dark and Bp.md
• [[data-theme=light]_&] can't be processed to valid Elm code

[synalysis]

Here's a case that produces invalid Elm code (found in https://tailwindui.com/components/marketing/sections/content-sections): <div class="lg:[overflow-anchor:none]"/> results in

    div
        [ css
            [ Bp.lg
                [ Bp.lg
                    [ Tw.none]
                    ]
                ]
            ]
        ]
        []

[dillonkearns]

Hey @synalysis, thanks for reporting the issue. I've been pairing with @matheus23 on some changes to make elm-tailwind-modules more Tailwind V3-friendly (https://github.com/matheus23/elm-tailwind-modules/pull/16).

That will make the API generate a module for the color and opacity theme. That will change the generated code here. I'll have to update this codebase to support generating code for that new design (parameterized color and opacity values). I thin that will be a good opportunity to also add in support for generating Tailwind V3-style arbitrary values (this is a new tailwind feature).

[synalysis]

Hey @synalysis, thanks for reporting the issue. I've been pairing with @matheus23 on some changes to make elm-tailwind-modules more Tailwind V3-friendly (matheus23/elm-tailwind-modules#16).

That will make the API generate a module for the color and opacity theme. That will change the generated code here. I'll have to update this codebase to support generating code for that new design (parameterized color and opacity values). I thin that will be a good opportunity to also add in support for generating Tailwind V3-style arbitrary values (this is a new tailwind feature).

Great, just wanted to provide you some potential input for unit tests...