Elevation
Tokens
--grapes-elevation-xs
--grapes-elevation-s
--grapes-elevation-m
--grapes-elevation-l
--grapes-elevation-xl
Usage in CSS
Whenever you want to apply this style, you can use the corresponding token.
.myClass {
box-shadow: var(--grapes-elevation-xs);
}
Usage with TailwindCSS
Whenever you want to use an elevation from Grapes with TailwindCSS, you can use the corresponding className.
| TailwindCSS className | CSS equivalent |
|---|---|
elevation-xs | box-shadow: var(--grapes-elevation-xs) |
elevation-s | box-shadow: var(--grapes-elevation-s) |
elevation-m | box-shadow: var(--grapes-elevation-m) |
elevation-l | box-shadow: var(--grapes-elevation-l) |
elevation-xl | box-shadow: var(--grapes-elevation-xl) |
See documentation from TailwindCSS: https://tailwindcss.com/docs/box-shadow.