From 3781e797cc28fed12ed7723ef5b22373098e2e21 Mon Sep 17 00:00:00 2001
From: Dylan Smith <dylanatsmith@github.com>
Date: Wed, 28 Jun 2023 13:03:04 +0100
Subject: [PATCH] Add utility and examples

---
 docs/content/utilities/typography.md              | 1 +
 docs/src/stories/utilities/Typography.stories.jsx | 1 +
 src/utilities/typography.scss                     | 5 +++++
 3 files changed, 7 insertions(+)

diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md
index 0c338943d6..a7a8ed3d7b 100644
--- a/docs/content/utilities/typography.md
+++ b/docs/content/utilities/typography.md
@@ -106,6 +106,7 @@ Change the font weight, styles, and alignment with these utilities.
 <p class="text-mono">Monospace</p>
 <p class="user-select-none">User Select None</p>
 <p class="text-capitalize">capitalize</p>
+<p class="text-tabular-nums">Tabular numbers 111</p>
 ```
 
 ## Word-break
diff --git a/docs/src/stories/utilities/Typography.stories.jsx b/docs/src/stories/utilities/Typography.stories.jsx
index b89ddb5174..c78a7e26f9 100644
--- a/docs/src/stories/utilities/Typography.stories.jsx
+++ b/docs/src/stories/utilities/Typography.stories.jsx
@@ -70,6 +70,7 @@ export const TypographicStyles = ({}) => (
     <p class="text-mono">Monospace</p>
     <p class="user-select-none">User Select None</p>
     <p class="text-capitalize">capitalize</p>
+    <p class="text-tabular-nums">Tabular numbers 111</p>
   </div>
 )
 
diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
index 8871d15878..962d4b7c4b 100644
--- a/src/utilities/typography.scss
+++ b/src/utilities/typography.scss
@@ -330,3 +330,8 @@
 .text-capitalize {
   text-transform: capitalize !important;
 }
+
+/* Use alternate glyphs for numbers of equal width (when font supports it) */
+.text-tabular-nums {
+  font-variant-numeric: tabular-nums !important;
+}