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-origintranslatetext-outline
| Class | Styles |
|---|---|
| text-outline | -unity-text-outline-width: 1px; |
| text-outline-<number> | -unity-text-outline-width: <number>px; |
| text-outline-inherit | -unity-text-outline-color: var(--color-inherit); |
| text-outline-transparent | -unity-text-outline-color: var(--color-transparent); |
| text-outline-black | -unity-text-outline-color: var(--color-black); |
| text-outline-white | -unity-text-outline-color: var(--color-white); |
| text-outline-red-50 | -unity-text-outline-color: var(--color-red-50); |
| text-outline-red-100 | -unity-text-outline-color: var(--color-red-100); |
| text-outline-red-200 | -unity-text-outline-color: var(--color-red-200); |
| text-outline-red-300 | -unity-text-outline-color: var(--color-red-300); |
| text-outline-red-400 | -unity-text-outline-color: var(--color-red-400); |
| text-outline-red-500 | -unity-text-outline-color: var(--color-red-500); |
| text-outline-red-600 | -unity-text-outline-color: var(--color-red-600); |
| text-outline-red-700 | -unity-text-outline-color: var(--color-red-700); |
| text-outline-red-800 | -unity-text-outline-color: var(--color-red-800); |
| text-outline-red-900 | -unity-text-outline-color: var(--color-red-900); |
| text-outline-red-950 | -unity-text-outline-color: var(--color-red-950); |
| text-outline-orange-50 | -unity-text-outline-color: var(--color-orange-50); |
| text-outline-orange-100 | -unity-text-outline-color: var(--color-orange-100); |
| text-outline-orange-200 | -unity-text-outline-color: var(--color-orange-200); |
| text-outline-orange-300 | -unity-text-outline-color: var(--color-orange-300); |
| text-outline-orange-400 | -unity-text-outline-color: var(--color-orange-400); |
| text-outline-orange-500 | -unity-text-outline-color: var(--color-orange-500); |
| text-outline-orange-600 | -unity-text-outline-color: var(--color-orange-600); |
| text-outline-orange-700 | -unity-text-outline-color: var(--color-orange-700); |
| text-outline-orange-800 | -unity-text-outline-color: var(--color-orange-800); |
| text-outline-orange-900 | -unity-text-outline-color: var(--color-orange-900); |
| text-outline-orange-950 | -unity-text-outline-color: var(--color-orange-950); |
| text-outline-amber-50 | -unity-text-outline-color: var(--color-amber-50); |
| text-outline-amber-100 | -unity-text-outline-color: var(--color-amber-100); |
| text-outline-amber-200 | -unity-text-outline-color: var(--color-amber-200); |
| text-outline-amber-300 | -unity-text-outline-color: var(--color-amber-300); |
| text-outline-amber-400 | -unity-text-outline-color: var(--color-amber-400); |
| text-outline-amber-500 | -unity-text-outline-color: var(--color-amber-500); |
| text-outline-amber-600 | -unity-text-outline-color: var(--color-amber-600); |
| text-outline-amber-700 | -unity-text-outline-color: var(--color-amber-700); |
| text-outline-amber-800 | -unity-text-outline-color: var(--color-amber-800); |
| text-outline-amber-900 | -unity-text-outline-color: var(--color-amber-900); |
| text-outline-amber-950 | -unity-text-outline-color: var(--color-amber-950); |
| text-outline-yellow-50 | -unity-text-outline-color: var(--color-yellow-50); |
| text-outline-yellow-100 | -unity-text-outline-color: var(--color-yellow-100); |
| text-outline-yellow-200 | -unity-text-outline-color: var(--color-yellow-200); |
| text-outline-yellow-300 | -unity-text-outline-color: var(--color-yellow-300); |
| text-outline-yellow-400 | -unity-text-outline-color: var(--color-yellow-400); |
| text-outline-yellow-500 | -unity-text-outline-color: var(--color-yellow-500); |
| text-outline-yellow-600 | -unity-text-outline-color: var(--color-yellow-600); |
| text-outline-yellow-700 | -unity-text-outline-color: var(--color-yellow-700); |
| text-outline-yellow-800 | -unity-text-outline-color: var(--color-yellow-800); |
| text-outline-yellow-900 | -unity-text-outline-color: var(--color-yellow-900); |
| text-outline-yellow-950 | -unity-text-outline-color: var(--color-yellow-950); |
| text-outline-lime-50 | -unity-text-outline-color: var(--color-lime-50); |
| text-outline-lime-100 | -unity-text-outline-color: var(--color-lime-100); |
| text-outline-lime-200 | -unity-text-outline-color: var(--color-lime-200); |
| text-outline-lime-300 | -unity-text-outline-color: var(--color-lime-300); |
| text-outline-lime-400 | -unity-text-outline-color: var(--color-lime-400); |
| text-outline-lime-500 | -unity-text-outline-color: var(--color-lime-500); |
| text-outline-lime-600 | -unity-text-outline-color: var(--color-lime-600); |
| text-outline-lime-700 | -unity-text-outline-color: var(--color-lime-700); |
| text-outline-lime-800 | -unity-text-outline-color: var(--color-lime-800); |
| text-outline-lime-900 | -unity-text-outline-color: var(--color-lime-900); |
| text-outline-lime-950 | -unity-text-outline-color: var(--color-lime-950); |
| text-outline-green-50 | -unity-text-outline-color: var(--color-green-50); |
| text-outline-green-100 | -unity-text-outline-color: var(--color-green-100); |
| text-outline-green-200 | -unity-text-outline-color: var(--color-green-200); |
| text-outline-green-300 | -unity-text-outline-color: var(--color-green-300); |
| text-outline-green-400 | -unity-text-outline-color: var(--color-green-400); |
| text-outline-green-500 | -unity-text-outline-color: var(--color-green-500); |
| text-outline-green-600 | -unity-text-outline-color: var(--color-green-600); |
| text-outline-green-700 | -unity-text-outline-color: var(--color-green-700); |
| text-outline-green-800 | -unity-text-outline-color: var(--color-green-800); |
| text-outline-green-900 | -unity-text-outline-color: var(--color-green-900); |
| text-outline-green-950 | -unity-text-outline-color: var(--color-green-950); |
| text-outline-emerald-50 | -unity-text-outline-color: var(--color-emerald-50); |
| text-outline-emerald-100 | -unity-text-outline-color: var(--color-emerald-100); |
| text-outline-emerald-200 | -unity-text-outline-color: var(--color-emerald-200); |
| text-outline-emerald-300 | -unity-text-outline-color: var(--color-emerald-300); |
| text-outline-emerald-400 | -unity-text-outline-color: var(--color-emerald-400); |
| text-outline-emerald-500 | -unity-text-outline-color: var(--color-emerald-500); |
| text-outline-emerald-600 | -unity-text-outline-color: var(--color-emerald-600); |
| text-outline-emerald-700 | -unity-text-outline-color: var(--color-emerald-700); |
| text-outline-emerald-800 | -unity-text-outline-color: var(--color-emerald-800); |
| text-outline-emerald-900 | -unity-text-outline-color: var(--color-emerald-900); |
| text-outline-emerald-950 | -unity-text-outline-color: var(--color-emerald-950); |
| text-outline-teal-50 | -unity-text-outline-color: var(--color-teal-50); |
| text-outline-teal-100 | -unity-text-outline-color: var(--color-teal-100); |
| text-outline-teal-200 | -unity-text-outline-color: var(--color-teal-200); |
| text-outline-teal-300 | -unity-text-outline-color: var(--color-teal-300); |
| text-outline-teal-400 | -unity-text-outline-color: var(--color-teal-400); |
| text-outline-teal-500 | -unity-text-outline-color: var(--color-teal-500); |
| text-outline-teal-600 | -unity-text-outline-color: var(--color-teal-600); |
| text-outline-teal-700 | -unity-text-outline-color: var(--color-teal-700); |
| text-outline-teal-800 | -unity-text-outline-color: var(--color-teal-800); |
| text-outline-teal-900 | -unity-text-outline-color: var(--color-teal-900); |
| text-outline-teal-950 | -unity-text-outline-color: var(--color-teal-950); |
| text-outline-cyan-50 | -unity-text-outline-color: var(--color-cyan-50); |
| text-outline-cyan-100 | -unity-text-outline-color: var(--color-cyan-100); |
| text-outline-cyan-200 | -unity-text-outline-color: var(--color-cyan-200); |
| text-outline-cyan-300 | -unity-text-outline-color: var(--color-cyan-300); |
| text-outline-cyan-400 | -unity-text-outline-color: var(--color-cyan-400); |
| text-outline-cyan-500 | -unity-text-outline-color: var(--color-cyan-500); |
| text-outline-cyan-600 | -unity-text-outline-color: var(--color-cyan-600); |
| text-outline-cyan-700 | -unity-text-outline-color: var(--color-cyan-700); |
| text-outline-cyan-800 | -unity-text-outline-color: var(--color-cyan-800); |
| text-outline-cyan-900 | -unity-text-outline-color: var(--color-cyan-900); |
| text-outline-cyan-950 | -unity-text-outline-color: var(--color-cyan-950); |
| text-outline-sky-50 | -unity-text-outline-color: var(--color-sky-50); |
| text-outline-sky-100 | -unity-text-outline-color: var(--color-sky-100); |
| text-outline-sky-200 | -unity-text-outline-color: var(--color-sky-200); |
| text-outline-sky-300 | -unity-text-outline-color: var(--color-sky-300); |
| text-outline-sky-400 | -unity-text-outline-color: var(--color-sky-400); |
| text-outline-sky-500 | -unity-text-outline-color: var(--color-sky-500); |
| text-outline-sky-600 | -unity-text-outline-color: var(--color-sky-600); |
| text-outline-sky-700 | -unity-text-outline-color: var(--color-sky-700); |
| text-outline-sky-800 | -unity-text-outline-color: var(--color-sky-800); |
| text-outline-sky-900 | -unity-text-outline-color: var(--color-sky-900); |
| text-outline-sky-950 | -unity-text-outline-color: var(--color-sky-950); |
| text-outline-blue-50 | -unity-text-outline-color: var(--color-blue-50); |
| text-outline-blue-100 | -unity-text-outline-color: var(--color-blue-100); |
| text-outline-blue-200 | -unity-text-outline-color: var(--color-blue-200); |
| text-outline-blue-300 | -unity-text-outline-color: var(--color-blue-300); |
| text-outline-blue-400 | -unity-text-outline-color: var(--color-blue-400); |
| text-outline-blue-500 | -unity-text-outline-color: var(--color-blue-500); |
| text-outline-blue-600 | -unity-text-outline-color: var(--color-blue-600); |
| text-outline-blue-700 | -unity-text-outline-color: var(--color-blue-700); |
| text-outline-blue-800 | -unity-text-outline-color: var(--color-blue-800); |
| text-outline-blue-900 | -unity-text-outline-color: var(--color-blue-900); |
| text-outline-blue-950 | -unity-text-outline-color: var(--color-blue-950); |
| text-outline-indigo-50 | -unity-text-outline-color: var(--color-indigo-50); |
| text-outline-indigo-100 | -unity-text-outline-color: var(--color-indigo-100); |
| text-outline-indigo-200 | -unity-text-outline-color: var(--color-indigo-200); |
| text-outline-indigo-300 | -unity-text-outline-color: var(--color-indigo-300); |
| text-outline-indigo-400 | -unity-text-outline-color: var(--color-indigo-400); |
| text-outline-indigo-500 | -unity-text-outline-color: var(--color-indigo-500); |
| text-outline-indigo-600 | -unity-text-outline-color: var(--color-indigo-600); |
| text-outline-indigo-700 | -unity-text-outline-color: var(--color-indigo-700); |
| text-outline-indigo-800 | -unity-text-outline-color: var(--color-indigo-800); |
| text-outline-indigo-900 | -unity-text-outline-color: var(--color-indigo-900); |
| text-outline-indigo-950 | -unity-text-outline-color: var(--color-indigo-950); |
| text-outline-violet-50 | -unity-text-outline-color: var(--color-violet-50); |
| text-outline-violet-100 | -unity-text-outline-color: var(--color-violet-100); |
| text-outline-violet-200 | -unity-text-outline-color: var(--color-violet-200); |
| text-outline-violet-300 | -unity-text-outline-color: var(--color-violet-300); |
| text-outline-violet-400 | -unity-text-outline-color: var(--color-violet-400); |
| text-outline-violet-500 | -unity-text-outline-color: var(--color-violet-500); |
| text-outline-violet-600 | -unity-text-outline-color: var(--color-violet-600); |
| text-outline-violet-700 | -unity-text-outline-color: var(--color-violet-700); |
| text-outline-violet-800 | -unity-text-outline-color: var(--color-violet-800); |
| text-outline-violet-900 | -unity-text-outline-color: var(--color-violet-900); |
| text-outline-violet-950 | -unity-text-outline-color: var(--color-violet-950); |
| text-outline-purple-50 | -unity-text-outline-color: var(--color-purple-50); |
| text-outline-purple-100 | -unity-text-outline-color: var(--color-purple-100); |
| text-outline-purple-200 | -unity-text-outline-color: var(--color-purple-200); |
| text-outline-purple-300 | -unity-text-outline-color: var(--color-purple-300); |
| text-outline-purple-400 | -unity-text-outline-color: var(--color-purple-400); |
| text-outline-purple-500 | -unity-text-outline-color: var(--color-purple-500); |
| text-outline-purple-600 | -unity-text-outline-color: var(--color-purple-600); |
| text-outline-purple-700 | -unity-text-outline-color: var(--color-purple-700); |
| text-outline-purple-800 | -unity-text-outline-color: var(--color-purple-800); |
| text-outline-purple-900 | -unity-text-outline-color: var(--color-purple-900); |
| text-outline-purple-950 | -unity-text-outline-color: var(--color-purple-950); |
| text-outline-fuchsia-50 | -unity-text-outline-color: var(--color-fuchsia-50); |
| text-outline-fuchsia-100 | -unity-text-outline-color: var(--color-fuchsia-100); |
| text-outline-fuchsia-200 | -unity-text-outline-color: var(--color-fuchsia-200); |
| text-outline-fuchsia-300 | -unity-text-outline-color: var(--color-fuchsia-300); |
| text-outline-fuchsia-400 | -unity-text-outline-color: var(--color-fuchsia-400); |
| text-outline-fuchsia-500 | -unity-text-outline-color: var(--color-fuchsia-500); |
| text-outline-fuchsia-600 | -unity-text-outline-color: var(--color-fuchsia-600); |
| text-outline-fuchsia-700 | -unity-text-outline-color: var(--color-fuchsia-700); |
| text-outline-fuchsia-800 | -unity-text-outline-color: var(--color-fuchsia-800); |
| text-outline-fuchsia-900 | -unity-text-outline-color: var(--color-fuchsia-900); |
| text-outline-fuchsia-950 | -unity-text-outline-color: var(--color-fuchsia-950); |
| text-outline-pink-50 | -unity-text-outline-color: var(--color-pink-50); |
| text-outline-pink-100 | -unity-text-outline-color: var(--color-pink-100); |
| text-outline-pink-200 | -unity-text-outline-color: var(--color-pink-200); |
| text-outline-pink-300 | -unity-text-outline-color: var(--color-pink-300); |
| text-outline-pink-400 | -unity-text-outline-color: var(--color-pink-400); |
| text-outline-pink-500 | -unity-text-outline-color: var(--color-pink-500); |
| text-outline-pink-600 | -unity-text-outline-color: var(--color-pink-600); |
| text-outline-pink-700 | -unity-text-outline-color: var(--color-pink-700); |
| text-outline-pink-800 | -unity-text-outline-color: var(--color-pink-800); |
| text-outline-pink-900 | -unity-text-outline-color: var(--color-pink-900); |
| text-outline-pink-950 | -unity-text-outline-color: var(--color-pink-950); |
| text-outline-rose-50 | -unity-text-outline-color: var(--color-rose-50); |
| text-outline-rose-100 | -unity-text-outline-color: var(--color-rose-100); |
| text-outline-rose-200 | -unity-text-outline-color: var(--color-rose-200); |
| text-outline-rose-300 | -unity-text-outline-color: var(--color-rose-300); |
| text-outline-rose-400 | -unity-text-outline-color: var(--color-rose-400); |
| text-outline-rose-500 | -unity-text-outline-color: var(--color-rose-500); |
| text-outline-rose-600 | -unity-text-outline-color: var(--color-rose-600); |
| text-outline-rose-700 | -unity-text-outline-color: var(--color-rose-700); |
| text-outline-rose-800 | -unity-text-outline-color: var(--color-rose-800); |
| text-outline-rose-900 | -unity-text-outline-color: var(--color-rose-900); |
| text-outline-rose-950 | -unity-text-outline-color: var(--color-rose-950); |
| text-outline-slate-50 | -unity-text-outline-color: var(--color-slate-50); |
| text-outline-slate-100 | -unity-text-outline-color: var(--color-slate-100); |
| text-outline-slate-200 | -unity-text-outline-color: var(--color-slate-200); |
| text-outline-slate-300 | -unity-text-outline-color: var(--color-slate-300); |
| text-outline-slate-400 | -unity-text-outline-color: var(--color-slate-400); |
| text-outline-slate-500 | -unity-text-outline-color: var(--color-slate-500); |
| text-outline-slate-600 | -unity-text-outline-color: var(--color-slate-600); |
| text-outline-slate-700 | -unity-text-outline-color: var(--color-slate-700); |
| text-outline-slate-800 | -unity-text-outline-color: var(--color-slate-800); |
| text-outline-slate-900 | -unity-text-outline-color: var(--color-slate-900); |
| text-outline-slate-950 | -unity-text-outline-color: var(--color-slate-950); |
| text-outline-gray-50 | -unity-text-outline-color: var(--color-gray-50); |
| text-outline-gray-100 | -unity-text-outline-color: var(--color-gray-100); |
| text-outline-gray-200 | -unity-text-outline-color: var(--color-gray-200); |
| text-outline-gray-300 | -unity-text-outline-color: var(--color-gray-300); |
| text-outline-gray-400 | -unity-text-outline-color: var(--color-gray-400); |
| text-outline-gray-500 | -unity-text-outline-color: var(--color-gray-500); |
| text-outline-gray-600 | -unity-text-outline-color: var(--color-gray-600); |
| text-outline-gray-700 | -unity-text-outline-color: var(--color-gray-700); |
| text-outline-gray-800 | -unity-text-outline-color: var(--color-gray-800); |
| text-outline-gray-900 | -unity-text-outline-color: var(--color-gray-900); |
| text-outline-gray-950 | -unity-text-outline-color: var(--color-gray-950); |
| text-outline-zinc-50 | -unity-text-outline-color: var(--color-zinc-50); |
| text-outline-zinc-100 | -unity-text-outline-color: var(--color-zinc-100); |
| text-outline-zinc-200 | -unity-text-outline-color: var(--color-zinc-200); |
| text-outline-zinc-300 | -unity-text-outline-color: var(--color-zinc-300); |
| text-outline-zinc-400 | -unity-text-outline-color: var(--color-zinc-400); |
| text-outline-zinc-500 | -unity-text-outline-color: var(--color-zinc-500); |
| text-outline-zinc-600 | -unity-text-outline-color: var(--color-zinc-600); |
| text-outline-zinc-700 | -unity-text-outline-color: var(--color-zinc-700); |
| text-outline-zinc-800 | -unity-text-outline-color: var(--color-zinc-800); |
| text-outline-zinc-900 | -unity-text-outline-color: var(--color-zinc-900); |
| text-outline-zinc-950 | -unity-text-outline-color: var(--color-zinc-950); |
| text-outline-neutral-50 | -unity-text-outline-color: var(--color-neutral-50); |
| text-outline-neutral-100 | -unity-text-outline-color: var(--color-neutral-100); |
| text-outline-neutral-200 | -unity-text-outline-color: var(--color-neutral-200); |
| text-outline-neutral-300 | -unity-text-outline-color: var(--color-neutral-300); |
| text-outline-neutral-400 | -unity-text-outline-color: var(--color-neutral-400); |
| text-outline-neutral-500 | -unity-text-outline-color: var(--color-neutral-500); |
| text-outline-neutral-600 | -unity-text-outline-color: var(--color-neutral-600); |
| text-outline-neutral-700 | -unity-text-outline-color: var(--color-neutral-700); |
| text-outline-neutral-800 | -unity-text-outline-color: var(--color-neutral-800); |
| text-outline-neutral-900 | -unity-text-outline-color: var(--color-neutral-900); |
| text-outline-neutral-950 | -unity-text-outline-color: var(--color-neutral-950); |
| text-outline-stone-50 | -unity-text-outline-color: var(--color-stone-50); |
| text-outline-stone-100 | -unity-text-outline-color: var(--color-stone-100); |
| text-outline-stone-200 | -unity-text-outline-color: var(--color-stone-200); |
| text-outline-stone-300 | -unity-text-outline-color: var(--color-stone-300); |
| text-outline-stone-400 | -unity-text-outline-color: var(--color-stone-400); |
| text-outline-stone-500 | -unity-text-outline-color: var(--color-stone-500); |
| text-outline-stone-600 | -unity-text-outline-color: var(--color-stone-600); |
| text-outline-stone-700 | -unity-text-outline-color: var(--color-stone-700); |
| text-outline-stone-800 | -unity-text-outline-color: var(--color-stone-800); |
| text-outline-stone-900 | -unity-text-outline-color: var(--color-stone-900); |
| text-outline-stone-950 | -unity-text-outline-color: var(--color-stone-950); |
| text-outline-(<custom-property>) | -unity-text-outline: var(<custom-property>); |
| text-outline-[<value>] | -unity-text-outline: <value>; |