Utility classes

Philosophy

Utilities are the final layer in Live Wires' cascade. They always win over components, layouts, and base styles—no !important needed. This is handled by CSS Cascade Layers.

Use utilities for:

• Art direction—One-off adjustments to specific elements
• Spacing overrides—Fine-tuning margins and padding
• Responsive behavior—Changing layout at different sizes
• Quick iteration—Trying options without writing CSS

To top

Spacing

File: 7_utilities/spacing.css

All spacing utilities use --line-* tokens, keeping everything on the baseline grid.

Scale

0, 025, 05, 075, 1, 15, 2, 3, 4, 5, 6, 1px, auto

Margin

Padding

Negative margins

Prefix with a dash for negative values:

.-mt-2  /* margin-block-start: calc(var(--line-2) * -1) */
.-mb-3  /* margin-block-end: calc(var(--line-3) * -1) */

To top

Typography

File: 7_utilities/typography.css

Font size (with line-height)

Each .text-* class sets font-size, line-height, and letter-spacing as a package:

.text-xs   .text-sm   .text-base   .text-lg   .text-xl
.text-2xl  .text-3xl  .text-4xl    .text-5xl  .text-6xl
.text-7xl  .text-8xl  .text-9xl

Responsive font sizes

Scale text at container breakpoints using the @md and @lg suffixes. Requires a parent with container-type (e.g., .section):

/* @md — 40rem+ container width */
.text-xs@md   .text-sm@md   .text-base@md   .text-lg@md   .text-xl@md
.text-2xl@md  .text-3xl@md  .text-4xl@md    .text-5xl@md  .text-6xl@md
.text-7xl@md  .text-8xl@md  .text-9xl@md

/* @lg — 60rem+ container width */
.text-xs@lg   .text-sm@lg   .text-base@lg   .text-lg@lg   .text-xl@lg
.text-2xl@lg  .text-3xl@lg  .text-4xl@lg    .text-5xl@lg  .text-6xl@lg
.text-7xl@lg  .text-8xl@lg  .text-9xl@lg

Example usage

<!-- Headline that scales up at larger container sizes -->
<h1 class="text-4xl text-6xl@md text-8xl@lg">Feature Title</h1>

<!-- Subhead that grows more modestly -->
<p class="text-lg text-xl@md text-2xl@lg">Supporting text</p>

Container queries respond to the parent container width, not the viewport. This makes components truly responsive to their context.

Font weight

.font-thin       /* 100 */
.font-extralight /* 200 */
.font-light      /* 300 */
.font-normal     /* 400 */
.font-medium     /* 500 */
.font-semibold   /* 600 */
.font-bold       /* 700 */
.font-extrabold  /* 800 */
.font-black      /* 900 */

Font family

.font-sans   /* var(--font-sans) */
.font-serif  /* var(--font-serif) */
.font-mono   /* var(--font-mono) */

Text alignment

.text-left    .text-center    .text-right    .text-justify

Line height overrides

.leading-none     /* 1 */
.leading-tight    /* 1.1 */
.leading-snug     /* 1.25 */
.leading-normal   /* 1.5 */
.leading-relaxed  /* 1.625 */
.leading-loose    /* 2 */

Letter spacing overrides

.tracking-tighter  /* -0.05em */
.tracking-tight    /* -0.025em */
.tracking-normal   /* 0 */
.tracking-wide     /* 0.025em */
.tracking-wider    /* 0.05em */
.tracking-widest   /* 0.1em */

Text transform

.uppercase    .lowercase    .capitalize    .normal-case

Measure (max-width for readability)

.measure         /* 65ch */
.measure-narrow  /* 45ch */
.measure-wide    /* 80ch */

Text wrapping

.text-balance  /* text-wrap: balance */
.text-pretty   /* text-wrap: pretty */

To top

Color

File: 7_utilities/color.css

See also: Color schemes component page

Color schemes

Apply a color scheme to a container. All children inherit the semantic colors (--color-bg, --color-fg, --color-accent, etc.):

Adaptive schemes (respond to dark mode)

.scheme-default   /* System default */
.scheme-subtle    /* Subtle grey background */

Brand color schemes

.scheme-accent        .scheme-orange       .scheme-orange-light
.scheme-red           .scheme-red-light    .scheme-blue
.scheme-blue-light    .scheme-yellow       .scheme-yellow-light
.scheme-green         .scheme-green-light

Greyscale schemes

.scheme-black     .scheme-grey-900    .scheme-grey-800
.scheme-grey-700  .scheme-grey-600    .scheme-grey-500
.scheme-grey-400  .scheme-grey-300    .scheme-grey-200
.scheme-grey-100

Text colors

Semantic

.text-fg       .text-accent   .text-muted
.text-white    .text-black

Brand colors (100-900 scale)

.text-orange   .text-orange-100 ... .text-orange-900
.text-red      .text-red-100 ... .text-red-900
.text-blue     .text-blue-100 ... .text-blue-900
.text-yellow   .text-yellow-100 ... .text-yellow-900
.text-green    .text-green-100 ... .text-green-900
.text-grey-100 ... .text-grey-900

Background colors

Semantic

.bg-white       .bg-black       .bg-subtle
.bg-accent      .bg-transparent

Brand colors (100-900 scale)

.bg-orange   .bg-orange-100 ... .bg-orange-900
.bg-red      .bg-red-100 ... .bg-red-900
.bg-blue     .bg-blue-100 ... .bg-blue-900
.bg-yellow   .bg-yellow-100 ... .bg-yellow-900
.bg-green    .bg-green-100 ... .bg-green-900
.bg-grey-100 ... .bg-grey-900

To top

Sizing

File: 7_utilities/sizing.css

Width

.w-auto   .w-full   .w-screen
.w-min    .w-max    .w-fit
.w-25     .w-33     .w-50     .w-66     .w-75

Height

.h-auto   .h-full   .h-screen
.h-min    .h-max    .h-fit

Max-width

.max-w-none     .max-w-xs      .max-w-sm
.max-w-md       .max-w-lg      .max-w-xl
.max-w-2xl      .max-w-full    .max-w-prose

To top

Display

File: 7_utilities/display.css

Display type

.block          .inline-block   .inline
.flex           .inline-flex    .grid
.inline-grid    .hidden         .contents

Visibility

.visible        .invisible
.sr-only        /* Screen reader only */

Overflow

.overflow-auto     .overflow-hidden   .overflow-visible
.overflow-scroll   .overflow-x-auto   .overflow-y-auto

Position

.static    .relative    .absolute    .fixed    .sticky

To top

Flexbox

File: 7_utilities/flexbox.css

Direction

.flex-row      .flex-row-reverse
.flex-col      .flex-col-reverse

Wrap

.flex-wrap     .flex-nowrap    .flex-wrap-reverse

Justify content

.justify-start     .justify-end      .justify-center
.justify-between   .justify-around   .justify-evenly

Align items

.items-start   .items-end      .items-center
.items-baseline .items-stretch

Align self

.self-auto     .self-start     .self-end
.self-center   .self-stretch

Gap

.gap-0   .gap-1   .gap-2   .gap-3   .gap-4   .gap-5   .gap-6

To top

Grid

File: 7_utilities/grid.css

Grid columns

.grid-cols-1   .grid-cols-2   .grid-cols-3
.grid-cols-4   .grid-cols-5   .grid-cols-6
.grid-cols-12

Column span

.col-span-1    .col-span-2    .col-span-3
.col-span-4    .col-span-5    .col-span-6
.col-span-full

Grid gap

.gap-0   .gap-1   .gap-2   .gap-3   .gap-4   .gap-5   .gap-6

To top

Borders

File: 7_utilities/borders.css

Border radius

.rounded-none  .rounded-sm    .rounded
.rounded-md    .rounded-lg    .rounded-xl
.rounded-2xl   .rounded-full

Border width

.border-0   .border   .border-2   .border-4

Border sides

.border-t   .border-b   .border-l   .border-r

To top

Media

File: 7_utilities/media.css

Object fit

.object-contain   .object-cover   .object-fill
.object-none      .object-scale-down

Object position

.object-center   .object-top      .object-bottom
.object-left     .object-right

Aspect ratio

.aspect-auto     .aspect-square   .aspect-video
.aspect-4-3      .aspect-3-2

To top

Tables

File: 7_utilities/tables.css

Column widths

Use on <th> or <td> elements:

.col-1     .col-5     .col-10    .col-15    .col-20
.col-25    .col-30    .col-33    .col-40    .col-50
.col-60    .col-66    .col-70    .col-75    .col-80

To top

Related documentation

• Code style guide — Naming conventions for utilities
• Typography system — Deep dive into type utilities
• Project structure — Where utility files live

To top