Units

Tokens

--grapes-unit-4

--grapes-unit-8

--grapes-unit-12

--grapes-unit-16

--grapes-unit-20

--grapes-unit-24

--grapes-unit-32

--grapes-unit-40

--grapes-unit-48

--grapes-unit-56

--grapes-unit-64

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

.myClass {
  margin-right: var(--grapes-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.