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-origintranslatemargin
| Class | Styles |
|---|---|
| m-<number> | margin: (--spacing * <number>); |
| -m-<number> | margin: (--spacing * -<number>); |
| m-px | margin: 1px; |
| -m-px | margin: -1px; |
| m-(<custom-property>) | margin: var(<custom-property>); |
| m-[<value>] | margin: <value>; |
| mx-<number> | margin-left: (--spacing * <number>); margin-right: (--spacing * <number>); |
| -mx-<number> | margin-left: (--spacing * -<number>); margin-right: (--spacing * -<number>); |
| mx-px | margin-left: 1px; margin-right: 1px; |
| -mx-px | margin-left: -1px; margin-right: -1px; |
| mx-(<custom-property>) | margin-left: var(<custom-property>); margin-right: var(<custom-property>); |
| mx-[<value>] | margin-left: <value>; margin-right: <value>; |
| my-<number> | margin-top: (--spacing * <number>); margin-bottom: (--spacing * <number>); |
| -my-<number> | margin-top: (--spacing * -<number>); margin-bottom: (--spacing * -<number>); |
| my-px | margin-top: 1px; margin-bottom: 1px; |
| -my-px | margin-top: -1px; margin-bottom: -1px; |
| my-(<custom-property>) | margin-top: var(<custom-property>); margin-bottom: var(<custom-property>); |
| my-[<value>] | margin-top: <value>; margin-bottom: <value>; |
| mt-<number> | margin-top: (--spacing * <number>); |
| -mt-<number> | margin-top: (--spacing * -<number>); |
| mt-px | margin-top: 1px; |
| -mt-px | margin-top: -1px; |
| mt-(<custom-property>) | margin-top: var(<custom-property>); |
| mt-[<value>] | margin-top: <value>; |
| mr-<number> | margin-right: (--spacing * <number>); |
| -mr-<number> | margin-right: (--spacing * -<number>); |
| mr-px | margin-right: 1px; |
| -mr-px | margin-right: -1px; |
| mr-(<custom-property>) | margin-right: var(<custom-property>); |
| mr-[<value>] | margin-right: <value>; |
| mb-<number> | margin-bottom: (--spacing * <number>); |
| -mb-<number> | margin-bottom: (--spacing * -<number>); |
| mb-px | margin-bottom: 1px; |
| -mb-px | margin-bottom: -1px; |
| mb-(<custom-property>) | margin-bottom: var(<custom-property>); |
| mb-[<value>] | margin-bottom: <value>; |
| ml-<number> | margin-left: (--spacing * <number>); |
| -ml-<number> | margin-left: (--spacing * -<number>); |
| ml-px | margin-left: 1px; |
| -ml-px | margin-left: -1px; |
| ml-(<custom-property>) | margin-left: var(<custom-property>); |
| ml-[<value>] | margin-left: <value>; |