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-origintranslateborder-radius
| Class | Styles |
|---|---|
| rounded-xs | border-radius: var(--radius-xs); |
| rounded-sm | border-radius: var(--radius-sm); |
| rounded-md | border-radius: var(--radius-md); |
| rounded-lg | border-radius: var(--radius-lg); |
| rounded-xl | border-radius: var(--radius-xl); |
| rounded-2xl | border-radius: var(--radius-2xl); |
| rounded-3xl | border-radius: var(--radius-3xl); |
| rounded-4xl | border-radius: var(--radius-4xl); |
| rounded-none | border-radius: 0; |
| rounded-full | border-radius: var(--radius-full); |
| rounded-(<custom-property>) | border-radius: var(<custom-property>); |
| rounded-[<value>] | border-radius: <value>; |
| rounded-t-xs | border-top-left-radius: var(--radius-xs); border-top-right-radius: var(--radius-xs); |
| rounded-t-sm | border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); |
| rounded-t-md | border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); |
| rounded-t-lg | border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); |
| rounded-t-xl | border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); |
| rounded-t-2xl | border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); |
| rounded-t-3xl | border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); |
| rounded-t-4xl | border-top-left-radius: var(--radius-4xl); border-top-right-radius: var(--radius-4xl); |
| rounded-t-none | border-top-left-radius: 0; border-top-right-radius: 0; |
| rounded-t-full | border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); |
| rounded-t-(<custom-property>) | border-top-left-radius: var(<custom-property>); border-top-right-radius: var(<custom-property>); |
| rounded-t-[<value>] | border-top-left-radius: <value>; border-top-right-radius: <value>; |
| rounded-r-xs | border-top-right-radius: var(--radius-xs); border-bottom-right-radius: var(--radius-xs); |
| rounded-r-sm | border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); |
| rounded-r-md | border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); |
| rounded-r-lg | border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); |
| rounded-r-xl | border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); |
| rounded-r-2xl | border-top-right-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); |
| rounded-r-3xl | border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); |
| rounded-r-4xl | border-top-right-radius: var(--radius-4xl); border-bottom-right-radius: var(--radius-4xl); |
| rounded-r-none | border-bottom-right-radius: 0; border-top-right-radius: 0; |
| rounded-r-full | border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); |
| rounded-r-(<custom-property>) | border-top-right-radius: var(<custom-property>); border-bottom-right-radius: var(<custom-property>); |
| rounded-r-[<value>] | border-top-right-radius: <value>; border-bottom-right-radius: <value>; |
| rounded-b-xs | border-bottom-right-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xs); |
| rounded-b-sm | border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); |
| rounded-b-md | border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); |
| rounded-b-lg | border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); |
| rounded-b-xl | border-bottom-right-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); |
| rounded-b-2xl | border-bottom-right-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); |
| rounded-b-3xl | border-bottom-right-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); |
| rounded-b-4xl | border-bottom-right-radius: var(--radius-4xl); border-bottom-left-radius: var(--radius-4xl); |
| rounded-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
| rounded-b-full | border-bottom-right-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); |
| rounded-b-(<custom-property>) | border-bottom-right-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>); |
| rounded-b-[<value>] | border-bottom-right-radius: <value>; border-bottom-left-radius: <value>; |
| rounded-l-xs | border-top-left-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xs); |
| rounded-l-sm | border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); |
| rounded-l-md | border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); |
| rounded-l-lg | border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); |
| rounded-l-xl | border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); |
| rounded-l-2xl | border-top-left-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); |
| rounded-l-3xl | border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); |
| rounded-l-4xl | border-top-left-radius: var(--radius-4xl); border-bottom-left-radius: var(--radius-4xl); |
| rounded-l-none | border-bottom-left-radius: 0; border-top-left-radius: 0; |
| rounded-l-full | border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); |
| rounded-l-(<custom-property>) | border-top-left-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>); |
| rounded-l-[<value>] | border-top-left-radius: <value>; border-bottom-left-radius: <value>; |
| rounded-tl-xs | border-top-left-radius: var(--radius-xs); |
| rounded-tl-sm | border-top-left-radius: var(--radius-sm); |
| rounded-tl-md | border-top-left-radius: var(--radius-md); |
| rounded-tl-lg | border-top-left-radius: var(--radius-lg); |
| rounded-tl-xl | border-top-left-radius: var(--radius-xl); |
| rounded-tl-2xl | border-top-left-radius: var(--radius-2xl); |
| rounded-tl-3xl | border-top-left-radius: var(--radius-3xl); |
| rounded-tl-4xl | border-top-left-radius: var(--radius-4xl); |
| rounded-tl-none | border-top-left-radius: 0; |
| rounded-tl-full | border-top-left-radius: var(--radius-full); |
| rounded-tl-(<custom-property>) | border-top-left-radius: var(<custom-property>); |
| rounded-tl-[<value>] | border-top-left-radius: <value>; |
| rounded-tr-xs | border-top-right-radius: var(--radius-xs); |
| rounded-tr-sm | border-top-right-radius: var(--radius-sm); |
| rounded-tr-md | border-top-right-radius: var(--radius-md); |
| rounded-tr-lg | border-top-right-radius: var(--radius-lg); |
| rounded-tr-xl | border-top-right-radius: var(--radius-xl); |
| rounded-tr-2xl | border-top-right-radius: var(--radius-2xl); |
| rounded-tr-3xl | border-top-right-radius: var(--radius-3xl); |
| rounded-tr-4xl | border-top-right-radius: var(--radius-4xl); |
| rounded-tr-none | border-top-right-radius: 0; |
| rounded-tr-full | border-top-right-radius: var(--radius-full); |
| rounded-tr-(<custom-property>) | border-top-right-radius: var(<custom-property>); |
| rounded-tr-[<value>] | border-top-right-radius: <value>; |
| rounded-bl-xs | border-bottom-left-radius: var(--radius-xs); |
| rounded-bl-sm | border-bottom-left-radius: var(--radius-sm); |
| rounded-bl-md | border-bottom-left-radius: var(--radius-md); |
| rounded-bl-lg | border-bottom-left-radius: var(--radius-lg); |
| rounded-bl-xl | border-bottom-left-radius: var(--radius-xl); |
| rounded-bl-2xl | border-bottom-left-radius: var(--radius-2xl); |
| rounded-bl-3xl | border-bottom-left-radius: var(--radius-3xl); |
| rounded-bl-4xl | border-bottom-left-radius: var(--radius-4xl); |
| rounded-bl-none | border-bottom-left-radius: 0; |
| rounded-bl-full | border-bottom-left-radius: var(--radius-full); |
| rounded-bl-(<custom-property>) | border-bottom-left-radius: var(<custom-property>); |
| rounded-bl-[<value>] | border-bottom-left-radius: <value>; |
| rounded-br-xs | border-bottom-right-radius: var(--radius-xs); |
| rounded-br-sm | border-bottom-right-radius: var(--radius-sm); |
| rounded-br-md | border-bottom-right-radius: var(--radius-md); |
| rounded-br-lg | border-bottom-right-radius: var(--radius-lg); |
| rounded-br-xl | border-bottom-right-radius: var(--radius-xl); |
| rounded-br-2xl | border-bottom-right-radius: var(--radius-2xl); |
| rounded-br-3xl | border-bottom-right-radius: var(--radius-3xl); |
| rounded-br-4xl | border-bottom-right-radius: var(--radius-4xl); |
| rounded-br-none | border-bottom-right-radius: 0; |
| rounded-br-full | border-bottom-right-radius: var(--radius-full); |
| rounded-br-(<custom-property>) | border-bottom-right-radius: var(<custom-property>); |
| rounded-br-[<value>] | border-bottom-right-radius: <value>; |