# Syntax

The syntax is very similar to TailwindCss, so everything will be clear to you.

Let's look at a few examples:

<div class="flex upper bold"></div>

These words are called tokens, and they can be single or have a value

<div class="flex-center fs-24 c-#fff m-10+20"></div>

As you can see, these tokens have a value, like prop-value

<div class="h:bg-red md:c:h-500"></div>

Also prop can have a specific state, it can be 1 or more.

In this case h is an abbreviation for hover, c is checked, md is media query, min-width: 768px

<div class="flex! bg-blue/50!"></div>

Behind you can add ! to make it !important .

props
props-values
states:props
states:props-values

If you put it all together, classes and attributes are written according to this template.