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-origintranslateflex-basis
| Class | Styles |
|---|---|
| basis-<number> | flex-basis: --spacing * <number>; |
| basis-full | flex-basis: 100%; |
| basis-auto | flex-basis: auto; |
| basis-3xs | flex-basis: var(--container-3xs); |
| basis-2xs | flex-basis: var(--container-2xs); |
| basis-xs | flex-basis: var(--container-xs); |
| basis-sm | flex-basis: var(--container-sm); |
| basis-md | flex-basis: var(--container-md); |
| basis-lg | flex-basis: var(--container-lg); |
| basis-xl | flex-basis: var(--container-xl); |
| basis-2xl | flex-basis: var(--container-2xl); |
| basis-3xl | flex-basis: var(--container-3xl); |
| basis-4xl | flex-basis: var(--container-4xl); |
| basis-5xl | flex-basis: var(--container-5xl); |
| basis-6xl | flex-basis: var(--container-6xl); |
| basis-7xl | flex-basis: var(--container-7xl); |
| basis-<custom-property> | flex-basis: var(<custom-property>); |
| basis-[<value>] | flex-basis: <value>; |