Skip to main content

Max-Height

Utilities for setting the maximum width of an element

Table of classes#

Class
Properties
max-h-0
{ maxHeight: 0 }
max-h-0.25
{ maxHeight: 1 }
max-h-0.5
{ maxHeight: 2 }
max-h-1
{ maxHeight: 4 }
max-h-1.5
{ maxHeight: 6 }
max-h-2
{ maxHeight: 8 }
max-h-2.5
{ maxHeight: 10 }
max-h-3
{ maxHeight: 12 }
max-h-3.5
{ maxHeight: 14 }
max-h-4
{ maxHeight: 16 }
max-h-5
{ maxHeight: 20 }
max-h-6
{ maxHeight: 24 }
max-h-7
{ maxHeight: 28 }
max-h-8
{ maxHeight: 32 }
max-h-9
{ maxHeight: 36 }
max-h-10
{ maxHeight: 40 }
max-h-11
{ maxHeight: 44 }
max-h-12
{ maxHeight: 48 }
max-h-14
{ maxHeight: 56 }
max-h-16
{ maxHeight: 64 }
max-h-20
{ maxHeight: 80 }
max-h-24
{ maxHeight: 96 }
max-h-28
{ maxHeight: 112 }
max-h-32
{ maxHeight: 128 }
max-h-36
{ maxHeight: 144 }
max-h-40
{ maxHeight: 160 }
max-h-44
{ maxHeight: 172 }
max-h-48
{ maxHeight: 196 }
max-h-52
{ maxHeight: 208 }
max-h-56
{ maxHeight: 224 }
max-h-60
{ maxHeight: 240 }
max-h-64
{ maxHeight: 256 }
max-h-72
{ maxHeight: 288 }
max-h-80
{ maxHeight: 320 }
max-h-1/2
{ maxHeight: '50%' }
max-h-1/3
{ maxHeight: '33.333333%' }
max-h-2/3
{ maxHeight: '66.666667%' }
max-h-1/4
{ maxHeight: '25%' }
max-h-2/4
{ maxHeight: '50%' }
max-h-3/4
{ maxHeight: '75%' }
max-h-1/5
{ maxHeight: '20%' }
max-h-2/5
{ maxHeight: '40%' }
max-h-3/5
{ maxHeight: '60%' }
max-h-4/5
{ maxHeight: '80%' }
max-h-1/6
{ maxHeight: '16.666667%' }
max-h-2/6
{ maxHeight: '33.333333%' }
max-h-3/6
{ maxHeight: '50%' }
max-h-4/6
{ maxHeight: '66,666667%' }
max-h-5/6
{ maxHeight: '83.333333%' }
max-h-1/12
{ maxHeight: '8.333333%' }
max-h-2/12
{ maxHeight: '16.666667%' }
max-h-3/12
{ maxHeight: '25%' }
max-h-4/12
{ maxHeight: '33.333333%' }
max-h-5/12
{ maxHeight: '41.666667%' }
max-h-6/12
{ maxHeight: '50%' }
max-h-7/12
{ maxHeight: '58.333333%' }
max-h-8/12
{ maxHeight: '66.666667%' }
max-h-9/12
{ maxHeight: '75%' }
max-h-10/12
{ maxHeight: '83.333333%' }
max-h-11/12
{ maxHeight: '91.666667%' }
max-h-full
{ maxHeight: '100%' }

Customization#

info

To get an introduction on how customization works, it is recommended to visit the dedicated page in the documentation

To customize the classes regarding the max-height, you go to modify the fields under the property called sizing.

wind.config.js
import { customize } from "react-native-wind";
customize({  theme: {    sizing: {      container: 140,    },  },});

The library will automatically generate classes for height, width, max-height, min-height, max-width and min-width called in this way:

  • w-container
  • h-container
  • min-w-container
  • max-w-container
  • min-h-container
  • max-h-container

Those will have a value of 140

note

Adding a property to sizing will always add a class to height, width, max-height, min-height, max-width and min-width because they refer to the same general values