Utilities for setting the width of an element
export default {
theme: {
extend: {
width: {
half: '50%',
},
},
},
}
Utilities for setting the minimum width of an element
export default {
theme: {
minWidth: {
half: '50%',
full: '100%',
},
},
}
Utilities for setting the maximum width of an element
export default {
theme: {
maxWidth: {
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
},
},
}
Utilities for setting the height of an element
export default {
theme: {
height: {
sm: '8px',
md: '16px',
lg: '24px',
xl: '48px',
},
},
}
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%',
},
},
}
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%',
},
},
}
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.