Min-Width

Utilities for setting the maximum width of an element

Table of classes

Class

Properties

min-w-0

{ minWidth: 0 }

min-w-0.25

{ minWidth: 1 }

min-w-0.5

{ minWidth: 2 }

min-w-1

{ minWidth: 4 }

min-w-1.5

{ minWidth: 6 }

min-w-2

{ minWidth: 8 }

min-w-2.5

{ minWidth: 10 }

min-w-3

{ minWidth: 12 }

min-w-3.5

{ minWidth: 14 }

min-w-4

{ minWidth: 16 }

min-w-5

{ minWidth: 20 }

min-w-6

{ minWidth: 24 }

min-w-7

{ minWidth: 28 }

min-w-8

{ minWidth: 32 }

min-w-9

{ minWidth: 36 }

min-w-10

{ minWidth: 40 }

min-w-11

{ minWidth: 44 }

min-w-12

{ minWidth: 48 }

min-w-14

{ minWidth: 56 }

min-w-16

{ minWidth: 64 }

min-w-20

{ minWidth: 80 }

min-w-24

{ minWidth: 96 }

min-w-28

{ minWidth: 112 }

min-w-32

{ minWidth: 128 }

min-w-36

{ minWidth: 144 }

min-w-40

{ minWidth: 160 }

min-w-44

{ minWidth: 172 }

min-w-48

{ minWidth: 196 }

min-w-52

{ minWidth: 208 }

min-w-56

{ minWidth: 224 }

min-w-60

{ minWidth: 240 }

min-w-64

{ minWidth: 256 }

min-w-72

{ minWidth: 288 }

min-w-80

{ minWidth: 320 }

min-w-1/2

{ minWidth: '50%' }

min-w-1/3

{ minWidth: '33.333333%' }

min-w-2/3

{ minWidth: '66.666667%' }

min-w-1/4

{ minWidth: '25%' }

min-w-2/4

{ minWidth: '50%' }

min-w-3/4

{ minWidth: '75%' }

min-w-1/5

{ minWidth: '20%' }

min-w-2/5

{ minWidth: '40%' }

min-w-3/5

{ minWidth: '60%' }

min-w-4/5

{ minWidth: '80%' }

min-w-1/6

{ minWidth: '16.666667%' }

min-w-2/6

{ minWidth: '33.333333%' }

min-w-3/6

{ minWidth: '50%' }

min-w-4/6

{ minWidth: '66,666667%' }

min-w-5/6

{ minWidth: '83.333333%' }

min-w-1/12

{ minWidth: '8.333333%' }

min-w-2/12

{ minWidth: '16.666667%' }

min-w-3/12

{ minWidth: '25%' }

min-w-4/12

{ minWidth: '33.333333%' }

min-w-5/12

{ minWidth: '41.666667%' }

min-w-6/12

{ minWidth: '50%' }

min-w-7/12

{ minWidth: '58.333333%' }

min-w-8/12

{ minWidth: '66.666667%' }

min-w-9/12

{ minWidth: '75%' }

min-w-10/12

{ minWidth: '83.333333%' }

min-w-11/12

{ minWidth: '91.666667%' }

min-w-full

{ minWidth: '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 min-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