Units

Tokens

--unit-4

--unit-8

--unit-12

--unit-16

--unit-20

--unit-24

--unit-32

--unit-40

--unit-48

--unit-56

--unit-64

Whenever you want to apply this style, you can use the corresponding variable.

.myClass {
  margin-right: var(--unit-8);
}

Whenever you want to use a unit from Grapes with TailwindCSS, you can use the corresponding keys.

Example with margin:

See documentation from TailwindCSS: https://tailwindcss.com/docs/margin.