Tailwind Breakpoints

How tailwind's breakpoints work

Tailwind (by default) uses min-width breakpoints.

The workflow with them should be like this:

1. You define styles for mobile without breakpoints
2. You adjust the styling for devices bigger than the sm (or lg, etc.) breakpoint
3. You in turn override these styles with even higher breakpoints

Read more about breakpoints in the [tailwind documentation].

A note about breakpoint usage oder

The above relies on style definitions having a certain order in css. The first style in css wins.

Thus, unfortunately you need to be careful about the order you use your breakpoints in elm-css. Make sure to use breakpoints from big to small, like so:

myElement =
    div
        [ css
            [ xxl [ text_indigo_700 ]
            , lg [ text_blue_700 ]
            , sm [ text_green_700 ]
            ]
        ]
        [ text "Colorful text"
        ]

This is not the case when using tailwind directly, because then tailwind has control over the order of declarations in the generated css, which we don't have.

Breakpoints