Color-classes Examples

Text Colors

This text is yellow

This [text]{.text-yellow} is yellow

This background is red

This [background]{.bg-red} is red

This word is both

This [word]{.text-yellow .bg-red} is both

decorations

For text decorations you will need to specify the text decoration seperately without using text-decoration. Instead you should be using text-decoration-line, text-decoration-style, and text-decoration-thickness.

Text decorators make words pop

Text decorators make [words pop]{.decoration-yellow style="text-decoration-line: underline;"} 

Outlines and borders

Outlines and borders work the way way as decorations does. You will likely need to add

border

[border]{.border-red style="border-style: dotted; border-width: 10px;"}

outline

[outline]{.outline-blue style="outline-style: groove; outline-width: 10px;"}

SVGs

{.fill-green}

{.stroke-blue .fill-white style="stroke-width: 5px;"}