antialiased rendering, tabular numerals, ordinals and numeric font variants. This family contains 8 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
ordinal--tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
slashed-zero--tw-slashed-zero: slashed-zero; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
lining-nums--tw-numeric-figure: lining-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
oldstyle-nums--tw-numeric-figure: oldstyle-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
tabular-nums--tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
diagonal-fractions--tw-numeric-fraction: diagonal-fractions; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Example#

example
html
<body class="antialiased">
<span class="tabular-nums">1,024.00</span>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • tabular-nums stops price/timer jitter
  • antialiased matches modern OS rendering

colors/index|Text color · utilities/typography/font-size|Font size