What is Turbo CSS?

<div class="t1 px-16 py-4 bg-c-white rounded-3 color-blue shadow-8 b-2-blue cursor-pointer select-none transition hover:shadow-16 hover:transform-scale-120-rotate--5">Button</div>


Turbo CSS is a CSS framework as a programming language.

It is like a utility-first CSS framework, except it is not a list of pre-generated utility classes, rather a recipe on how to make any of them. You just use any valid Turbo CSS expression (class name) and Turbo will generate the required CSS code to make them work.

For example, to create a div with a width and height of 16px, you would write:

<div class="t1 w-16 h-16"></div>

And in turn, the Turbo CSS compiler will generate the following CSS classes for you:

.t1.w-16 { width: 16px; } .t1.h-16 { height: 16px; }

You can focus on the design and move fast, Turbo CSS will do the boring work behind the scenes.