Selectors, combinators


You can build complex expressions to only apply styles to an element when certain conditions are met. You can do that using various selectors.

Most selectors are are placed before the utility function call, for example:

Turbo CSS expression Explanation
hover:color-red
Set text color to red when the element is hovered
w10:font-48
Set font size to 48px on viewports having a width of at least 1024px
last:bb-1-solid-gray
Give the element a 1px solid gray bottom border if it is the last element in its container

Combinators

Combinators allow you to only apply a utility when other elements meet certain conditions.

Turbo CSS expression Explanation
hover:/color-red
Set text color to red when the element's parent is hovered
active:+/last:bg-c-gray-100
Give the element a gray background if it is the last element in its container and its parent's preceeding sibling is in active state (eg. button pressed)