Local style ignored if global style has high specificity

[nidico]

The default tailwind "preflight" global styles include definitions with high specificity, e.g.:

Css.Global.selector "button,\n[type='button'],\n[type='reset'],\n[type='submit']"
    [ Css.property "-webkit-appearance" "button"
    , Css.property "background-color" "transparent"
    , Css.property "background-image" "none"
    ]

In order to overwrite the global preflight style, tailwindcss requires local CSS to be loaded after the global styles, see tailwindlabs/tailwindcss#6602 (where the button issue is discussed).

@matheus23 states in an elm discourse thread that we can't do this right now in elm-tailwind-modules:

Unfortunately, elm-tailwind-modules can’t control the ordering of the final CSS, because that’s in the user’s control with elm-css. I’m working on fixing that.

This issue keeps track of this problem.

In the following example (using elm-default-tailwind-modules 4.0.1), the button has a transparent background despite having a different local background definition:

module Main exposing (main)

import Css
import Css.Global     
import Html.Styled as Html
import Html.Styled.Attributes as A   
import Tailwind.Theme as Theme 
import Tailwind.Utilities as Tw         
                               

main =
    Html.toUnstyled <|
        Html.div []
            [ Css.Global.global Tw.globalStyles
            , Html.button
                [ A.type_ "button"                    
                , A.css                               
                    [ Tw.bg_color Theme.green_500
                    ]                    
                ]    
                [ Html.text "huhu" ]         
            ]

@matheus23 also mentions a workaround in the discourse thread - use

Css.important Tw.bg_color Theme.green_500

See also: #7