Colors

The full Tailwind color palette is available as strongly typed Color values: 22 families, 11 shades each, plus black and white.

Color utilities

Pass a Color value to one of three methods. The color name becomes part of the generated class.

Utility	Generated CSS
`Background(Color.Red500)`	`background-color: <value> -> bg-red-500`
`Color(Color.Red500)`	`color: <value> -> text-red-500`
`BorderColor(Color.Red500)`	`border-color: <value> -> border-red-500`

Red 500

Emerald 500

White with border

<div class="@Css.P(4).RoundedMd()
                .Background(Color.Red500)
                .Color(Color.White).FontBold()">
    Red 500
</div>

Each Color exposes the raw value as well, which is useful when you need the value in your own code.

Color emerald = Color.Emerald500;

string name = emerald.Name;   // "emerald-500"
string value = emerald.Value; // "oklch(0.696 0.17 162.48)"

Every family runs from shade 50 (lightest) to 950 (darkest). The swatches below are rendered with the builder itself.

amber

blue

cyan

emerald

fuchsia

gray

green

indigo

lime

neutral

orange

pink

purple

red

rose

sky

slate

stone

teal

violet

yellow

zinc

Black

White

Continue with the layout utilities.