Breakpoints
Mobile first
Fabric (Tailwind) uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.
What this means is that unprefixed utilities (like flex) take effect on all screen sizes, while prefixed utilities (like md:flex) only take effect at the specified breakpoint and above.
References
Supported breakpoints
| Breakpoint prefix | Min width | CSS |
|---|---|---|
| sm | 480px | @media (min-width: 480px){ ... } |
| md | 768px | @media (min-width: 768px){ ... } |
| lg | 990px | @media (min-width: 990px){ ... } |
sm:
hits most mobiles in landscape and up
md:
hits tablets and up
lg:
hits full desktop-width and up
Example
It is a good practice to explicitly turn everything off when not applicable, even if it is something
that is 'currently' ignored by the browser. In this example the
md:grid-cols-2
could be set as
grid-cols-2
and that would have the exact same effect since grid is not turned on below the
md:
breakpoint, but when things start to get more complex its much better to always turn off stuff that
is not needed. And also... Browsers do change over time.
Targeting mobile screens
Where this approach surprises people most often is that to style something for mobile, you need to
use the unprefixed version of a utility, not the
sm:
prefixed version. Don’t think of
sm:
as meaning “on small screens”, think of it as “at the small breakpoint“.