Skip to main content

Height

Utilities for setting the height of an element

Table of classes#

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