Press/to search

Sizing

Max Width

Utilities for sets the maximum width of an element.


Class

classcss
max-w-xsmax-width: 20rem
max-w-smmax-width: 24rem
max-w-mdmax-width: 28rem
max-w-lgmax-width: 32rem
max-w-xlmax-width: 36rem
max-w-2xlmax-width: 42rem
max-w-3xlmax-width: 48rem
max-w-4xlmax-width: 56rem
max-w-5xlmax-width: 64rem
max-w-6xlmax-width: 72rem
max-w-fullmax-width: 100%
max-w-screen-smmax-width: 640px
max-w-screen-mdmax-width: 768px
max-w-screen-lgmax-width: 1024px
max-w-screen-xlmax-width: 1280px
max-w-nonemax-width: none

Usage

<!-- Example -->
<y class="max-w-md">
...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'max-w',
$property: max-width,
$modifier: (
sm: 30%,
md: 50%
//...
)
);

// Add Variants
@include yogurt(
$class: 'max-w',
$property: max-width,
$modifier: (
sm: 30%,
md: 50%
//...
),
$variant: (
'responsive'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.