Developer

Intros How it works API reference Turbo CSS Fundamentals What is Turbo CSS? API first Portable code Zero side-effects Using in an existing codebase Multiple Turbo instances Future Turbo versions Browser support Compilation Utility functions Negative values Selectors, combinators Libraries User defined classes Color syntax Color names Default colors values Utilities Selectors Download Turbo UI

Overview

What is Turbo CSS? API first Portable code Zero side-effects Using in an existing codebase Multiple Turbo instances Future Turbo versions Browser support Compilation

The Language

Utility functions Negative values Selectors, combinators Libraries User defined classes

Color system

Color syntax Color names Default colors values

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:

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.