Stroke color


stroke: {color};


<div class="t1 flex flex-center w-320 p-32 bg-c-white shadow-4"> <svg class="t1 w-40 h-40 stroke-c-blue stroke-4" viewBox="0 0 20 20" fill="none" xmlns=""><path d="M3 17L17 3M3 3l14 14" stroke-linecap="round"/></svg> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Passing color name.
t1 stroke-c-blue
.t1.stroke-c-blue { stroke: #12A4E2; }
Passing color name and shade.
t1 stroke-c-blue-500
.t1.stroke-c-blue-500 { stroke: #12A4E2; }
Passing color name, shade, opacity.
t1 stroke-c-blue-500-50
.t1.stroke-c-blue-500-50 { stroke: #12A4E280; }
Passing HEX color value in lowercase format.
t1 stroke-c-hex-abcdef
.t1.stroke-c-hex-abcdef { stroke: #ABCDEF; }
Passing HEX color value in uppercase format.
t1 stroke-c-hex-ABCDEF
.t1.stroke-c-hex-ABCDEF { stroke: #ABCDEF; }
Passing HEX color value with alpha channel.
t1 stroke-c-hex-12345678
.t1.stroke-c-hex-12345678 { stroke: #12345678; }
Passing rgb color value.
t1 stroke-c-rgb-12-34-56
.t1.stroke-c-rgb-12-34-56 { stroke: rgb(12, 34, 56); }
Passing rgba color value.
t1 stroke-c-rgb-12-34-56-78
.t1.stroke-c-rgb-12-34-56-78 { stroke: rgba(12, 34, 56, 78%); }
Passing hsl color value.
t1 stroke-c-hsl-60-20-40
.t1.stroke-c-hsl-60-20-40 { stroke: hsl(60deg, 20%, 40%); }
Passing hsla color value.
t1 stroke-c-hsl-60-20-40-66
.t1.stroke-c-hsl-60-20-40-66 { stroke: hsla(60deg, 20%, 40%, 66%); }
Unknown color name.
t1 stroke-c-unknownname
Error: unknown color definition [unknownname] in class name [stroke-c-unknownname]