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>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'max-w',
//variant: 'responsive',
property: 'max-width',
modifier: (
'...': '...',
'...': '...'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled