Sizing

You can use the sizing helpers to set the width or height of any element.

Customize sizing helpers

The sizes that will be used to generate the sizing helpers can be defined in the sizes field of your theme.

export default {
    sizes: {
        "0": "0px",
        "1": "0.25rem",
        "2": "0.5rem",
        "4": "1rem",
        // ...other sizes
    },
    // ...other configuration
};

The following sizes will be always included for generating the sizing helpers, regardless the sizes you provide in your theme configuration:

Width

Add any of the has-w-{size} classnames to modify the width property of the element.

Use has-w-auto to let the browser to automatically calculate the width of the element:

<div class="has-w-auto ..."></div>

Use has-w-screen to fit the width of the screen:

<div class="has-w-screen ..."></div>

Use the other clasess to set a fixed width:

<div class="has-w-64 has-p-4 has-bg-primary is-rounded">
    <strong>.has-w-64</strong>
</div>

Height

Add any of the has-h-{size} classnames to modify the height property of the element.

Use has-h-auto to let the browser to automatically calculate the height of the element:

<div class="has-h-auto ..."></div>

Use has-h-screen to fit the height of the screen:

<div class="has-h-screen ..."></div>

Use the other clasess to set a fixed height:

<div class="has-h-32 has-w-64 has-p-4 has-bg-primary is-rounded">
    <strong>has-h-32</strong>
</div>

Responsive sizing

You can control the sizing of an element at a specific breakpoint adding a -{breakpoint} suffix to the sizing class.

<div class="has-w-half has-w-full-mobile">
    . . .
</div>