INTRODUCTION
IntroductionCore ConceptsGETTING STARTED
InstallationQuick startWhirl Compiler SettingsCORE CONCEPTS
Using Utility ClassesStyle FunctionsPseudo-Classes and statesResponsive DesignResponsive Base ElementThemeArbitrary ValuesLAYOUT
aspect-ratiodisplayoverflowpositionvisibilityobject-fittop / right / bottom / leftFLEXBOX
flex-basisflex-directionflex-wrapflexflex-growflex-shrinkgapjustify-contentalign-contentalign-itemsalign-selfSPACING
paddingmarginSIZING
widthmin-widthmax-widthheightmin-heightmax-heightTYPOGRAPHY
font-sizefont-styleauto-sizetext-outlineletter-spacingtext-aligncolorword-spacingparagraph-spacingtext-overflowoverflow-positionwhite-spaceBACKGROUND
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeBORDER
border-radiusborder-widthborder-colorEFFECTS
text-shadowopacityFILTER
Filterblurbrightnesscontrastgrayscalehue-rotateinvertsaturatesepiaTRANSITION
transition-propertytransition-durationtransition-timing-functiondelayTRANSFORM
rotatescaletransform-origintranslatetop / right / bottom / left
| Class | Styles |
|---|---|
| top-<number> | top: --spacing * <number>; |
| -top-<number> | top: --spacing * -<number>; |
| top-px | top: 1px; |
| -top-px | top: -1px; |
| top-full | top: 100%; |
| -top-full | top: -100%; |
| top-auto | top: auto; |
| top-(<custom-property>) | top: var(<custom-property>); |
| top-[<value>] | top: <value>; |
| right-<number> | right: --spacing * <number>; |
| -right-<number> | right: --spacing * -<number>; |
| right-px | right: 1px; |
| -right-px | right: -1px; |
| right-full | right: 100%; |
| -right-full | right: -100%; |
| right-auto | right: auto; |
| right-(<custom-property>) | right: var(<custom-property>); |
| right-[<value>] | right: <value>; |
| bottom-<number> | bottom: --spacing * <number>; |
| -bottom-<number> | bottom: --spacing * -<number>; |
| bottom-px | bottom: 1px; |
| -bottom-px | bottom: -1px; |
| bottom-full | bottom: 100%; |
| -bottom-full | bottom: -100%; |
| bottom-auto | bottom: auto; |
| bottom-(<custom-property>) | bottom: var(<custom-property>); |
| bottom-[<value>] | bottom: <value>; |
| left-<number> | left: --spacing * <number>; |
| -left-<number> | left: --spacing * -<number>; |
| left-px | left: 1px; |
| -left-px | left: -1px; |
| left-full | left: 100%; |
| -left-full | left: -100%; |
| left-auto | left: auto; |
| left-(<custom-property>) | left: var(<custom-property>); |
| left-[<value>] | left: <value>; |