.container utility is not working when used with breakpoints

[justinrassier]

From Discourse thread:

The .container class sets the max-width of an element to match the min-width of the current breakpoint.

Maybe its the breakpoint bit - but the effect was null using the package when the same combination of classes behave very nicely using ‘raw’ tailwindcss. The other issue was that I couldn’t put classes on svg - an elm-css thing since they have to be converted to styled html before elm-css can work with them.

[justinrassier]

Figured out what was wrong. The container class is a bit different than the other breakpoint-based utilities. The raw Tailwind for example is this:

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

In particular is uses the breakpoint pixel size inside of the declaration. Since we don't generate the breakpoint based utilities, if you use the Breakpoint utility Tw.Breakpoints.atBreakpoint [(TW.Breakpoints.lg, TW.container)] you just end up with a width: 100% and not one that applies the Breakpoint pixels.

Two solutions come to mind:

• The atBreakpoint helper could be smarter and handle the case that someone uses container and apply the breakpoint px rule correctly - I like this from an API perspective, as it behaves as you would expect. The function is a little magical at that point though.
• Create a new Breakpoint utility like :

container : Maybe Breakpoint -> Css.Style

Where if you pass in a breakpoint, it applies it, otherwise you get the default container width: 100%

I like the explicit behavior or this, but it may not be super obvious that you can't use the utility as you would expect, you need to know to use some extra helper:

div [ css [TW.Breakpoints.container (Just lg) ] ]
            [ div [ css [ TW.space_y_32 ] ]
                [ div [  ] [ text "div" ]      ]
            ]