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-origintranslatefont-size
| Class | Styles |
|---|---|
| text-xs | font-size: var(--text-xs); |
| text-sm | font-size: var(--text-sm); |
| text-base | font-size: var(--text-base); |
| text-lg | font-size: var(--text-lg); |
| text-xl | font-size: var(--text-xl); |
| text-2xl | font-size: var(-text-2xl); |
| text-3xl | font-size: var(-text-3xl); |
| text-4xl | font-size: var(-text-xs); |
| text-5xl | font-size: var(-text-5xl); |
| text-6xl | font-size: var(-text-6xl); |
| text-7xl | font-size: var(-text-7xl); |
| text-8xl | font-size: var(-text-8xl); |
| text-9xl | font-size: var(-text-9xl); |
| text-auto | font-size: auto; |
| text-px | font-size: 1px; |
| text-full | font-size: 100%; |
| text-(length: <custom-property>) | font-size: var(<custom-property>); |
| text-[<value>] | font-size: <value>; |