Tailwind (by default) uses min-width breakpoints.
The workflow with them should be like this:
sm
(or lg
, etc.) breakpointRead more about breakpoints in the [tailwind documentation].
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.
lg : List Css.Style -> Css.Style
Media query breakpoint for minimum width 1024px
CSS: @media (min-width: 1024px) { ... }
Also see the tailwind documentation
md : List Css.Style -> Css.Style
Media query breakpoint for minimum width 768px
CSS: @media (min-width: 768px) { ... }
Also see the tailwind documentation
sm : List Css.Style -> Css.Style
Media query breakpoint for minimum width 640px
CSS: @media (min-width: 640px) { ... }
Also see the tailwind documentation
xl : List Css.Style -> Css.Style
Media query breakpoint for minimum width 1280px
CSS: @media (min-width: 1280px) { ... }
Also see the tailwind documentation
xxl : List Css.Style -> Css.Style
Media query breakpoint for minimum width 1536px
CSS: @media (min-width: 1536px) { ... }
Also see the tailwind documentation