Sizing #

Width #

Utilities for setting the width of an element

export default {
  theme: {
    extend: {
      width: {
        half: '50%',
      },
    },
  },
}

Min-Width #

Utilities for setting the minimum width of an element

export default {
  theme: {
    minWidth: {
      half: '50%',
      full: '100%',
    },
  },
}

Max-Width #

Utilities for setting the maximum width of an element

export default {
  theme: {
    maxWidth: {
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
    },
  },
}

Height #

Utilities for setting the height of an element

export default {
  theme: {
    height: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Min-Height #

Utilities for setting the minimum height of an element

export default {
  theme: {
    minHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Max-Height #

Utilities for setting the maximum height of an element

export default {
  theme: {
    maxHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
  },
}

Box Sizing #

Utilities for controlling how the browser should calculate an element's total size.

• Use box-border to tell the browser to include the element's borders and padding when you give it a height or width. This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px. Windi makes this the default for all elements in our preflight base styles.

• Use box-content to tell the browser to add borders and padding on top of the element's specified width or height. This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px.