This is a list of all the components that are responsive.
When you see the
badge it means the component has responsive breakpoints for different sized screens. The breakpoint is anything 600px or wider is considered
lg and anything under 600px is
sm. By default everything is “mobile first” which means the default class is both screen sizes.
A class that uses the
-lg infix is only large devices. For example
width: 100% on all screen sizes. But
w-full w-lg-10 is
width: 100% on small screens and
width: 40px on large screen sizes.
Note: Some email clients like Gmail mobile do not support any media queries and so some responsive functions do not work on them.
Not everything that is responsive uses these names. For example the
.container is responsive by default and expands and contracts on different screens.