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-origintranslatepadding
| Class | Styles |
|---|---|
| p-<number> | padding: (--spacing * <number>); |
| p-px | padding: 1px; |
| p-(<custom-property>) | padding: var(<custom-property>); |
| p-[<value>] | padding: <value>; |
| px-<number> | padding-left: (--spacing * <number>); padding-right: (--spacing * <number>); |
| px-px | padding-left: 1px; padding-right: 1px; |
| px-(<custom-property>) | padding-left: var(<custom-property>); padding-right: var(<custom-property>); |
| px-[<value>] | padding-left: <value>; padding-right: <value>; |
| py-<number> | padding-top: (--spacing * <number>); padding-bottom: (--spacing * <number>); |
| py-px | padding-top: 1px; padding-bottom: 1px; |
| py-(<custom-property>) | padding-top: var(<custom-property>); padding-bottom: var(<custom-property>); |
| py-[<value>] | padding-top: <value>; padding-bottom: <value>; |
| pt-<number> | padding-top: (--spacing * <number>); |
| pt-px | padding-top: 1px; |
| pt-(<custom-property>) | padding-top: var(<custom-property>); |
| pt-[<value>] | padding-top: <value>; |
| pr-<number> | padding-right: (--spacing * <number>); |
| pr-px | padding-right: 1px; |
| pr-(<custom-property>) | padding-right: var(<custom-property>); |
| pr-[<value>] | padding-right: <value>; |
| pb-<number> | padding-bottom: (--spacing * <number>); |
| pb-px | padding-bottom: 1px; |
| pb-(<custom-property>) | padding-bottom: var(<custom-property>); |
| pb-[<value>] | padding-bottom: <value>; |
| pl-<number> | padding-left: (--spacing * <number>); |
| pl-px | padding-left: 1px; |
| pl-(<custom-property>) | padding-left: var(<custom-property>); |
| pl-[<value>] | padding-left: <value>; |