Layout

Box sizing Display Float Clear Overflow Position Z index

Sizing

Width Min width Max width Height Min height Max height

Spacing

Margin Padding

Border

Border Border width Border color Border style Border radius

Outline

Outline Outline width Outline color Outline style Outline offset

Coordinates

Top Right Bottom Left Inset

Flexbox

Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment

Box alignment

Justify content Align content Align items Align self

Table

Table layout Border collapse

Background

Background attachment Background clip Background color Background position Background repeat Background size Background pattern

Object

Object fit Object position

Effects

Box shadow Opacity Visibility

Text

Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break

Transform

Transform Scale Rotate Translate Skew Transform origin

Transition

Transition Transition property Transition duration Transition timing function Transition delay

Interactivity

Appearance Cursor Pointer events Resize User select

SVG

Fill Stroke color Stroke width

Visibility

Syntax

Class

Properties

visible

visibility: visible;

invisible

visibility: hidden;

Appearance

invisible elements do take up space ( visibility: hidden ) as opposed to hidden elements ( display: none ).

Using opacity-0 has the same visual effect as invisible, though they respond to interactivity differently.

Interactivity

invisible elements do not respond to clicks as opposed to those with opacity-0.

In this example, the last element will be blue while the middle element is active (clicked).

click the middle element <div class="t1 w-full flex flex-row flex-center"> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4 visible"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4 active:+bg-c-blue"></div> </div>

invisible elements can not be focused as opposed to those with opacity-0.

In this example, the last element will be blue while the middle element is focused.

click the first element then press TAB <div class="t1 w-full flex flex-row flex-center"> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black"></button> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black visible"></button> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black focus:+bg-c-blue"></button> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Show the element.

t1 visible

.t1.visible { visibility: visible; }

Hide the element.

t1 invisible

.t1.invisible { visibility: hidden; }