0build.dev
Choose a layout

font-variant-numeric

Report an Issue
Class Description

normal-nums

Resets font-variant-numeric to normal, clearing any numeric font variant styling.

CSS Rules 

.normal-nums {
  font-variant-numeric: normal;
}

Usage 

<element class="normal-nums" />

Responsive

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

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

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="normal-nums: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="normal-nums: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 normal-nums::before" />

<element class="content-after normal-nums::after" />
 .normal-nums Resets font-variant-numeric to normal, clearing any numeric font variant styling.

ordinal

Enables ordinal numeral glyphs (e.g. 1st, 2nd) via font-variant-numeric.

CSS Rules 

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: ordinal;
}

Usage 

<element class="ordinal" />

Responsive

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

<element class="md:ordinal" />

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="ordinal: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="ordinal: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 ordinal::before" />

<element class="content-after ordinal::after" />
 .ordinal Enables ordinal numeral glyphs (e.g. 1st, 2nd) via font-variant-numeric.

slashed-zero

Enables a slashed zero glyph via font-variant-numeric, distinguishing zero from the letter O.

CSS Rules 

.slashed-zero {
  --tw-slashed-zero: slashed-zero;
  font-variant-numeric: slashed-zero;
}

Usage 

<element class="slashed-zero" />

Responsive

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

<element class="md:slashed-zero" />

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="slashed-zero: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="slashed-zero: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 slashed-zero::before" />

<element class="content-after slashed-zero::after" />
 .slashed-zero Enables a slashed zero glyph via font-variant-numeric, distinguishing zero from the letter O.

lining-nums

Enables lining figure numerals (uniform height) via font-variant-numeric.

CSS Rules 

.lining-nums {
  --tw-numeric-figure: lining-nums;
  font-variant-numeric: lining-nums;
}

Usage 

<element class="lining-nums" />

Responsive

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

<element class="md:lining-nums" />

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="lining-nums: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="lining-nums: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 lining-nums::before" />

<element class="content-after lining-nums::after" />
 .lining-nums Enables lining figure numerals (uniform height) via font-variant-numeric.

oldstyle-nums

Enables oldstyle figure numerals (varying height/depth) via font-variant-numeric.

CSS Rules 

.oldstyle-nums {
  --tw-numeric-figure: oldstyle-nums;
  font-variant-numeric: oldstyle-nums;
}

Usage 

<element class="oldstyle-nums" />

Responsive

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

<element class="md:oldstyle-nums" />

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="oldstyle-nums: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="oldstyle-nums: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 oldstyle-nums::before" />

<element class="content-after oldstyle-nums::after" />
 .oldstyle-nums Enables oldstyle figure numerals (varying height/depth) via font-variant-numeric.

proportional-nums

Enables proportionally-spaced numeral glyphs via font-variant-numeric.

CSS Rules 

.proportional-nums {
  --tw-numeric-spacing: proportional-nums;
  font-variant-numeric: proportional-nums;
}

Usage 

<element class="proportional-nums" />

Responsive

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

<element class="md:proportional-nums" />

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="proportional-nums: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="proportional-nums: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 proportional-nums::before" />

<element class="content-after proportional-nums::after" />
 .proportional-nums Enables proportionally-spaced numeral glyphs via font-variant-numeric.

tabular-nums

Sets font-variant-numeric: tabular-nums. Digits use equal widths for alignment.

CSS Rules 

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: tabular-nums;
}

Usage 

<element class="tabular-nums" />

Responsive

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

<element class="md:tabular-nums" />

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="tabular-nums: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="tabular-nums: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 tabular-nums::before" />

<element class="content-after tabular-nums::after" />
 .tabular-nums Sets font-variant-numeric: tabular-nums. Digits use equal widths for alignment.

diagonal-fractions

Renders numeric fractions with diagonal styling via font-variant-numeric.

CSS Rules 

.diagonal-fractions {
  --tw-numeric-fraction: diagonal-fractions;
  font-variant-numeric: diagonal-fractions;
}

Usage 

<element class="diagonal-fractions" />

Responsive

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

<element class="md:diagonal-fractions" />

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="diagonal-fractions: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="diagonal-fractions: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 diagonal-fractions::before" />

<element class="content-after diagonal-fractions::after" />
 .diagonal-fractions Renders numeric fractions with diagonal styling via font-variant-numeric.

stacked-fractions

Renders numeric fractions with vertically stacked styling via font-variant-numeric.

CSS Rules 

.stacked-fractions {
  --tw-numeric-fraction: stacked-fractions;
  font-variant-numeric: stacked-fractions;
}

Usage 

<element class="stacked-fractions" />

Responsive

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

<element class="md:stacked-fractions" />

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="stacked-fractions: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="stacked-fractions: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 stacked-fractions::before" />

<element class="content-after stacked-fractions::after" />
 .stacked-fractions Renders numeric fractions with vertically stacked styling via font-variant-numeric.