tinywind

Welcome to tinywind's documentation!

Everything inside {} is replaced with a value, or a class prefix. You can tell that a value is actually a class prefix by a dash at the end.

Colors

If needed a color as a value, you should be able to put a color's name from this list. You add values like this:

<e class="class_prefix-value" />

List of colors for {border-,text-,bg-}{color}

green - #436633

blue - #57a1f2

red - #db5aa1

yellow - #f2c657

orange - #f28d49

white - #ffffff

black - #000000

lightgray - #c0c0c0

Borders

If you're using borders in your code, not only you can specify a color, but a mode. Specify the modes just like a color.

List of modes for border-{mode}

dotted - dotted border

solid - solid border

double - double border

groove - groove border

ridge - ridge border

inset - inset border

outset - outset border

none - no border

Font sizes

List of modes for text-{size}

xxs - extra extra small, 0.5rem

xs - extra small, 0.625rem

s - small, 0.75rem

m - medium, 1rem

l - large, 1.25rem

xl - extra large, 1.5rem

xxl - extra extra large, 2rem

Fonts

font families for font-{type}. If a font is not found, it will use the next one. Before the colon in the types is the type.

sans - Segoe UI, Roboto, -apple-system, BlinkMacSystemFont, sans-serif

serif - Times New Roman, serif

monospace - monospace

Corners

List of modes for corner-{type}

rounded - 0.25rem, rounded corners

lrounded - 0.5rem, rounded corners

xlrounded - 1rem, rounded corners

circle - 50%, circle

Animations

List of modes for animation-{mode}.

• fadein

• fadeout

Animation times

List of times for animation-time-{time}, these are the names of the values, they are all times in milliseconds.

• 250

• 500

• 750

• 1000

• 1250

• 1500

• 1750

• 2000

• 2250

• 2500

• 2750

• 3000

Centering

Center elements horizontally and/or vertically. Both cannot be used at the same time, that will make the element off-centered.

.center - centers the element horizontally and vertically

.center-horizontal - centers the element horizontally

.center-vertical - centers the element vertically