Skip to main content

Max-Width

Utilities for setting the maximum width of an element

Table of classes#

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