Sizing

Width

Utilities for setting the width of an element

auto
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      width: {
        half: '50%',
      },
    },
  },
}

Min-Width

Utilities for setting the minimum width of an element

none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    minWidth: {
      half: '50%',
      full: '100%',
    },
  },
}

Max-Width

Utilities for setting the maximum width of an element

none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    maxWidth: {
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
    },
  },
}

Height

Utilities for setting the height of an element

auto
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    height: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Min-Height

Utilities for setting the minimum height of an element

none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
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

none
px
full
screen
min
max
prose
xs
sm
md
lg
xl
2xl
3xl
screen-sm
screen-md
screen-lg
screen-xl
screen-2xl
0
1
1.5
2
4
8
10
12
14
18
20
24
1/2
1/3
3/5
11/12
4rem
60px
CSS
Customizing
// windi.config.js
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.

border
content
CSS