Screens

Customizing screens and breakpoints or starting with the official design system.

Default

export default {
    variables: {
        screen: {
            "4xs": 360,
            "3xs": 480,
            "2xs": 600,
            "xs": 768,
            "sm": 834,
            "md": 1024,
            "lg": 1280,
            "xl": 1440,
            "2xl": 1600,
            "3xl": 1920,
            "4xl": 2560
        }
    }
}

Apply the default screen variables using any syntax:

<div class="w:screen-sm max-w:screen-lg">…</div>

Basic usage

Add a screen size

Customize your screen size tokens by defining variables.

export default {
    variables: {
        screen: {
            desktop: 1280
        }
    }
}

Apply the defined screen variables anywhere:

<div class="max-w:screen-desktop mx:auto">…</div>

Create a responsive container

Fixed element width to a screen size as a responsive container.

<div class="max-w:screen-sm@sm max-w:screen-md@md max-w:screen-lg@lg …">…</div>

To customize the responsive breakpoints, like @sm, define media queries.