This is a list of all the components that are responsive.

• Container
• Display
• Gap
• Grid
• Height
• Images
• Margin
• Padding
• Space Between
• Stack
• Width

When you see the Responsive 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 w-full is 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.