Prelight tailwind making type submit to be brackground transparent

[kutyel]

Hi! I'm using elm-land with default-tailwind-modules, and even though I'm correctly setting the bg color for my button type=submit, the background is still transparent! I think this is an issue related to this behaviour in tailwind:

• preflight button reset in v3 inconsistent with v2 tailwindlabs/tailwindcss#6602
• Remove background-color: transparent from default button styles tailwindlabs/tailwindcss#12063
  Is there a way to disable preflight mode with this package?

Here is the relevant View.elm file, in case it helps to debug what is wrong:

toBrowserDocument :
    { shared : Shared.Model.Model
    , route : Route ()
    , view : View msg
    }
    -> Browser.Document msg
toBrowserDocument { view } =
    let
        screen : Html msg
        screen =
            Html.div [] <|
                Css.Global.global Tw.globalStyles
                    :: view.body
    in
    { title = view.title
    , body = [ Html.toUnstyled screen ]
    }

Thanks in advance!

[matheus23]

What happens if you try doing this:

toBrowserDocument :
    { shared : Shared.Model.Model
    , route : Route ()
    , view : View msg
    }
    -> Browser.Document msg
toBrowserDocument { view } =
    let
        screen : Html msg
        screen =
            Html.div [] (view.body ++ [ Css.Global.global Tw.globalStyles ])
    in
    { title = view.title
    , body = [ Html.toUnstyled screen ]
    }

---

Does this also happen without elm-land?

[kutyel]

The same, I'm not sure if it is elm-land fault but I think the issue is that the global styles are loading after my custom tailwind styles and therefore overriding the thing 😟

@ryannhg any input you could give, is this maybe not the correct way to do tailwind in elm-land? 👀

[matheus23]

yeah - unfortunately tailwind working correctly depends on the order that styles are loaded in.
Usually looking at the generated HTML in the browser DevTools should be enough to verify that global styles come first.