Elevation
Tokens
--elevation-xs
--elevation-s
--elevation-m
--elevation-l
--elevation-xl
Usage in CSS
Whenever you want to apply this style, you can use the corresponding token.
.myClass {
box-shadow: var(--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(--elevation-xs) |
elevation-s | box-shadow: var(--elevation-s) |
elevation-m | box-shadow: var(--elevation-m) |
elevation-l | box-shadow: var(--elevation-l) |
elevation-xl | box-shadow: var(--elevation-xl) |
See documentation from TailwindCSS: https://tailwindcss.com/docs/box-shadow.