Docs
Colours
Purple #7967e1 Blue #1B9FD6 Green #24EC94 Yellow #ffcd00 Red #F72585Buttons
Do not use the buttons class without a colour modifier. When using a group of buttons, only make the main button fully coloured and the rest outlined.
Outlined
Spacing
Use the following helper classes for custom spacing.
| Class Name | CSS |
|---|---|
w-full |
width: 100%; |
w-screen |
width: 100vw; |
h-full |
height: 100%; |
h-screen |
height: 100vh; |
min-w-full |
min-width: 100%; |
max-w-full |
max-width: 100%; |
min-w-screen |
min-width: 100vw; |
max-w-screen |
max-width: 100vw; |
min-h-full |
min-height: 100%; |
max-h-full |
max-height: 100%; |
min-h-screen |
min-height: 100vh; |
max-h-screen |
max-height: 100vh; |
Overflow
| Class Name | Description |
|---|---|
overflow-scroll |
Show scrolling bar when content overflows. |
overflow-x-hidden |
Do not show a scrolling bar when the content overflows on the x-axis. |
overflow-y-hidden |
Do not show a scrolling bar when the content overflows on the y-axis. |
mask-overflow |
Hide content which overflows the bounds. |
inset-round (as a modifier to mask-overflow) |
Make the bounds round. You can control the radius size with $mask-inset-radius. |
Glass Effect
Use is-glass as a modifier to the box class to give the background a glass effect.
Cursors
Hover the tags to see the cursors in effect.
cursor-none cursor-default cursor-pointer cursor-wait cursor-text cursor-crosshair cursor-alias cursor-all-scroll cursor-cell cursor-col-resize cursor-row-resize cursor-copy cursor-help cursor-progress cursor-move cursor-no-drop cursor-not-allowed cursor-grab cursor-grabbing cursor-n-resize cursor-s-resize cursor-e-resize cursor-w-resize cursor-ns-resize cursor-ew-resize cursor-ne-resize cursor-nw-resize cursor-se-resize cursor-sw-resize cursor-nesw-resize cursor-nwse-resize cursor-zoom-in cursor-zoom-out