Width and height work like spacing — w and h, plus a value. min- and max- prefixes are supported for both axes.
Width
| Class | CSS |
|---|
chai-w-0 | width: 0px |
chai-w-100 | width: 100px |
chai-w-full | width: 100% |
chai-w-half | width: 50% |
chai-w-auto | width: auto |
chai-w-screen-w | width: 100vw |
chai-w-[60ch] | width: 60ch |
chai-w-[calc(100%-2rem)] | width: calc(100% - 2rem) |
Height
| Class | CSS |
|---|
chai-h-0 | height: 0px |
chai-h-12 | height: 12px |
chai-h-full | height: 100% |
chai-h-screen-h | height: 100vh |
chai-h-[480px] | height: 480px |
Min and max
Add min- or max- in front of the axis letter.
| Class | CSS |
|---|
chai-min-w-200 | min-width: 200px |
chai-min-h-screen-h | min-height: 100vh |
chai-max-w-[60ch] | max-width: 60ch |
chai-max-h-[80vh] | max-height: 80vh |
Keyword shortcuts
| Token | Resolves to |
|---|
full | 100% |
half | 50% |
auto | auto |
screen-w | 100vw |
screen-h | 100vh |
