Utilities

utility classes for layout adjusting.

Item Placement

use these to manage item placement in grid or flexbox

• format: justify-content-{value}, align-content-{value}, place-content-{value}
• responsive: false
• Detail

Flex order

use order-{number} or order-first, order-last to specify the flex item order

• format: order-{number}, order-first, order-last
• responsive: true
• Detail

Display

use d-{state} to specify the display property.

• format: d-{state}
• responsive: true
• Detail

Spacing

spacing including margin, padding, both use the same format.

• format: m-{level}, p-{level}
• responsive: true
• Detail

Sizing

sizing including width, height, max-width, max-height

• format: w-{percent}, h-{percent}, mw-100, mh-100
• responsive: false
• Detail

Text

including text-align, text-decoration, white-space, word-break, text-transform, font-weight, font-style

• format: text-{type}, fw-{state}, fst-{state}
• Detail

Interactions

including user-select, pointer-events

• format: user-select-{type}, pointer-events-{type}
• responsive: false
• Detail

Float

use float-{align} to define the float align.

• format: float-{align}
• responsive: true
• Detail