0build.dev
Choose a layout

letter-spacing

Report an Issue
Class Description

tracking

Sets letter-spacing via --tracking. Raw value. E.g. 0.05em.

CSS Rules 

.tracking {
  letter-spacing: var(--tracking);
}

Usage

The .tracking class is flagged as a value-driven selector. The variable --tracking is required. 
<element class="tracking" style="--tracking: /* value */;" />

Responsive

Prefix .tracking utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking" style="--md-tracking: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking:hover" style="--tracking-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking::before" style="--tracking-before: /* value */;" />

<element class="content-after tracking::after" style="--tracking-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="tracking=value" />

<!-- Output -->
<element class="tracking" style="--tracking: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.tracking Sets letter-spacing via --tracking. Raw value. E.g. 0.05em.

-tracking-normal

Sets letter-spacing to a negated zero value (-0em); functionally equivalent to normal tracking.

CSS Rules 

.-tracking-normal {
  letter-spacing: -0em;
}

Usage 

<element class="-tracking-normal" />

Responsive

Prefix .-tracking-normal utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-normal" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-normal:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-normal:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-normal::before" />

<element class="content-after -tracking-normal::after" />
 .-tracking-normal Sets letter-spacing to a negated zero value (-0em); functionally equivalent to normal tracking.

-tracking-tight

Applies a negative letter-spacing override that widens tracking by 0.025em (inverse of tight).

CSS Rules 

.-tracking-tight {
  letter-spacing: 0.025em;
}

Usage 

<element class="-tracking-tight" />

Responsive

Prefix .-tracking-tight utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-tight" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-tight:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-tight:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-tight::before" />

<element class="content-after -tracking-tight::after" />
 .-tracking-tight Applies a negative letter-spacing override that widens tracking by 0.025em (inverse of tight).

-tracking-tighter

Applies a negative letter-spacing override that widens tracking by 0.05em (inverse of tighter).

CSS Rules 

.-tracking-tighter {
  letter-spacing: 0.05em;
}

Usage 

<element class="-tracking-tighter" />

Responsive

Prefix .-tracking-tighter utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-tighter" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-tighter:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-tighter:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-tighter::before" />

<element class="content-after -tracking-tighter::after" />
 .-tracking-tighter Applies a negative letter-spacing override that widens tracking by 0.05em (inverse of tighter).

-tracking-wide

Applies a negative letter-spacing of -0.025em, tightening tracking (inverse of wide).

CSS Rules 

.-tracking-wide {
  letter-spacing: -0.025em;
}

Usage 

<element class="-tracking-wide" />

Responsive

Prefix .-tracking-wide utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-wide" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-wide:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-wide:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-wide::before" />

<element class="content-after -tracking-wide::after" />
 .-tracking-wide Applies a negative letter-spacing of -0.025em, tightening tracking (inverse of wide).

-tracking-wider

Applies a negative letter-spacing of -0.05em, tightening tracking (inverse of wider).

CSS Rules 

.-tracking-wider {
  letter-spacing: -0.05em;
}

Usage 

<element class="-tracking-wider" />

Responsive

Prefix .-tracking-wider utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-wider" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-wider:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-wider:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-wider::before" />

<element class="content-after -tracking-wider::after" />
 .-tracking-wider Applies a negative letter-spacing of -0.05em, tightening tracking (inverse of wider).

-tracking-widest

Applies a negative letter-spacing of -0.1em, tightening tracking (inverse of widest).

CSS Rules 

.-tracking-widest {
  letter-spacing: -0.1em;
}

Usage 

<element class="-tracking-widest" />

Responsive

Prefix .-tracking-widest utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:-tracking-widest" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="-tracking-widest:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="-tracking-widest:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before -tracking-widest::before" />

<element class="content-after -tracking-widest::after" />
 .-tracking-widest Applies a negative letter-spacing of -0.1em, tightening tracking (inverse of widest).

tracking-normal

Sets letter-spacing to 0em, the default tracking value.

CSS Rules 

.tracking-normal {
  letter-spacing: 0em;
}

Usage 

<element class="tracking-normal" />

Responsive

Prefix .tracking-normal utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-normal" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-normal:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-normal:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-normal::before" />

<element class="content-after tracking-normal::after" />
 .tracking-normal Sets letter-spacing to 0em, the default tracking value.

tracking-tight

Sets letter-spacing to tight preset.

CSS Rules 

.tracking-tight {
  letter-spacing: -0.025em;
}

Usage 

<element class="tracking-tight" />

Responsive

Prefix .tracking-tight utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-tight" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-tight:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-tight:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-tight::before" />

<element class="content-after tracking-tight::after" />
 .tracking-tight Sets letter-spacing to tight preset.

tracking-tighter

Sets letter-spacing to -0.05em, tightening character spacing.

CSS Rules 

.tracking-tighter {
  letter-spacing: -0.05em;
}

Usage 

<element class="tracking-tighter" />

Responsive

Prefix .tracking-tighter utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-tighter" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-tighter:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-tighter:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-tighter::before" />

<element class="content-after tracking-tighter::after" />
 .tracking-tighter Sets letter-spacing to -0.05em, tightening character spacing.

tracking-wide

Sets letter-spacing to wide preset.

CSS Rules 

.tracking-wide {
  letter-spacing: 0.025em;
}

Usage 

<element class="tracking-wide" />

Responsive

Prefix .tracking-wide utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-wide" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-wide:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-wide:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-wide::before" />

<element class="content-after tracking-wide::after" />
 .tracking-wide Sets letter-spacing to wide preset.

tracking-wider

Sets letter-spacing to 0.05em, loosening character spacing.

CSS Rules 

.tracking-wider {
  letter-spacing: 0.05em;
}

Usage 

<element class="tracking-wider" />

Responsive

Prefix .tracking-wider utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-wider" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-wider:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-wider:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-wider::before" />

<element class="content-after tracking-wider::after" />
 .tracking-wider Sets letter-spacing to 0.05em, loosening character spacing.

tracking-widest

Sets letter-spacing to widest preset.

CSS Rules 

.tracking-widest {
  letter-spacing: 0.1em;
}

Usage 

<element class="tracking-widest" />

Responsive

Prefix .tracking-widest utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:tracking-widest" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="tracking-widest:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="tracking-widest:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before tracking-widest::before" />

<element class="content-after tracking-widest::after" />
 .tracking-widest Sets letter-spacing to widest preset.