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

Color syntax

Color is a complex type spanning one or more values.

Syntax

Class

Properties

{scaleName}

{...}

{scaleName}-{shade}

{...}

{scaleName}-{shade}-{opacity}

{...}

{pointName}

{...}

{pointName}-{opacity}

{...}

transparent

current

currentColor

hex-{rgb}

#{rgb}

hex-{rgba}

#{rgba}

hex-{rrggbb}

#{rrggbb}

hex-{rrggbbaa}

#{rrggbbaa}

rgb-{r}-{g}-{b}

rgb({r}, {g}, {b})

rgb-{r}-{g}-{b}-{a}

rgba({r}, {g}, {b}, {a})

hsl-{h}-{s}-{l}

hsl({h}, {s}, {l})

hsl-{h}-{s}-{l}-{a}

hsla({h}, {s}, {l}, {a})

Parameters

scaleName

Name of the color scale. See definitions below.

shade

Defaults to 500.

opacity

Unit: %. Defaults to 100%.

pointName

black | white | <string>

Name of the color point. See definitions below.

rgb

Without the hash mark, for example ABC.

rgba

Without the hash mark, for example ABCD.

rrggbb

Without the hash mark, for example ABCDEF.

rrggbbaa

Without the hash mark, for example ABCDEF12.

<uint8>

Red color code between 0-255.

<uint8>

Green color code between 0-255.

<uint8>

Blue color code between 0-255.

<int32>

Hue. Unit: deg.

<uint8>

Saturation value between 0-100. Unit: %.

<uint8>

Lightness value between 0-100. Unit: %.

<uint8>

Alpha value between 0-100. Unit: %.

<div class="t1 mb-8">Identical colors (500 is the default shade)</div> <div class="t1 flex @/w-32 @/h-32 @/shadow-2-inset @/rounded-full @/m-4"> <div class="t1 bg-c-blue"></div> <div class="t1 bg-c-blue-500"></div> </div>