Sizes

List of tokens used for sizes.

Usage

<Box w="md" />

<Box h="md" />

Tokens

0.5

1

1.5

2

2.5

3

3.5

4

4.5

5

5.5

6

6.5

7

7.5

8

9

10

11

12

13

14

15

16

20

24

28

32

36

40

44

48

52

56

60

64

68

72

76

80

84

88

92

96

TokenValue
1"0.25rem"
2"0.5rem"
3"0.75rem"
4"1rem"
5"1.25rem"
6"1.5rem"
7"1.75rem"
8"2rem"
9"2.25rem"
10"2.5rem"
11"2.75rem"
12"3rem"
13"3.25rem"
14"3.5rem"
15"3.75rem"
16"4rem"
20"5rem"
24"6rem"
28"7rem"
32"8rem"
36"9rem"
40"10rem"
44"11rem"
48"12rem"
52"13rem"
56"14rem"
60"15rem"
64"16rem"
68"17rem"
72"18rem"
76"19rem"
80"20rem"
84"21rem"
88"22rem"
92"23rem"
96"24rem"
0.5"0.125rem"
1.5"0.375rem"
2.5"0.625rem"
3.5"0.875rem"
4.5"1.125rem"
5.5"1.375rem"
6.5"1.625rem"
7.5"1.875rem"
px"1px"

Semantic Tokens

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

TokenValue
fit"fit-content"
max"max-content"
min"min-content"
dvh"100dvh"
dvw"100dvw"
full"100%"
lvh"100lvh"
lvw"100lvw"
svh"100svh"
svw"100svw"
vh"100vh"
vw"100vw"
9xs"1rem"
8xs"2rem"
7xs"3rem"
6xs"4rem"
5xs"6rem"
4xs"8rem"
3xs"10rem"
2xs"12rem"
xs"16rem"
sm"20rem"
md"24rem"
lg"28rem"
xl"32rem"
2xl"38rem"
3xl"44rem"
4xl"50rem"
5xl"56rem"
6xl"64rem"
7xl"72rem"
8xl"80rem"
9xl"88rem"

Fractional Tokens

1/2

1/3

1/4

1/5

1/6

1/12

2/3

2/5

2/6

2/12

3/4

3/5

3/6

3/12

4/5

4/6

4/12

5/6

5/12

6/12

7/12

8/12

9/12

10/12

11/12

TokenValue
1/2"calc(100% / 2)"
1/3"calc(100% / 3)"
1/4"calc(100% / 4)"
1/5"calc(100% / 5)"
1/6"calc(100% / 6)"
1/12"calc(100% / 12)"
2/3"calc(100% / 3 * 2)"
2/5"calc(100% / 5 * 2)"
2/6"calc(100% / 6 * 2)"
2/12"calc(100% / 12 * 2)"
3/4"calc(100% / 4 * 3)"
3/5"calc(100% / 5 * 3)"
3/6"calc(100% / 6 * 3)"
3/12"calc(100% / 12 * 3)"
4/5"calc(100% / 5 * 4)"
4/6"calc(100% / 6 * 4)"
4/12"calc(100% / 12 * 4)"
5/6"calc(100% / 6 * 5)"
5/12"calc(100% / 12 * 5)"
6/12"calc(100% / 12 * 6)"
7/12"calc(100% / 12 * 7)"
8/12"calc(100% / 12 * 8)"
9/12"calc(100% / 12 * 9)"
10/12"calc(100% / 12 * 10)"
11/12"calc(100% / 12 * 11)"