Repository: tailwindlabs/tailwindcss
Pull request #2305 (2020-09-03 18:15:40)

Add fontVariantNumeric utilities
This PR adds a new set of utilities for the [`font-variant-numeric` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric):

| Class                | Description                              |
| -------------------- | ---------------------------------------- |
| `normal-nums`        | Reset `font-variant-numeric` to `normal` |
| `ordinal`            | Enables the `ordinal` feature            |
| `slashed-zero`       | Enables the `slashed-zero` feature       |
| `lining-nums`        | Enables the `lining-nums` feature        |
| `oldstyle-nums`      | Enables the `oldstyle-nums` feature      |
| `proportional-nums`  | Enables the `proportional-nums` feature  |
| `tabular-nums`       | Enables the `tabular-nums` feature       |
| `diagonal-fractions` | Enables the `diagonal-fractions` feature |
| `stacked-fractions`  | Enables the `stacked-fractions` feature  |

The exciting thing about how these are implemented is that they are _composable_ in your HTML, so you can enable multiple `font-variant-numeric` features by adding multiple classes:

```html
<p class="slashed-zero tabular-nums diagonal-fractions">
  12345
</p>
```

The `normal-nums` class can be used to reset things, usually used at a particular breakpoint:

```html
<p class="slashed-zero tabular-nums diagonal-fractions md:normal-nums">
  12345
</p>
```

By default, only `responsive` variants are enabled for this new core plugin.

## Design details

This was pretty challenging to implement and only works thanks to a magical tip from @davidkpiano. Here's what the CSS looks like:

```css
.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
  --font-variant-numeric-ordinal: /*!*/;
  --font-variant-numeric-slashed-zero: /*!*/;
  --font-variant-numeric-figure: /*!*/;
  --font-variant-numeric-spacing: /*!*/;
  --font-variant-numeric-fractions: /*!*/;
  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fractions);
}

.normal-nums {
  font-variant-numeric: normal;
}

.ordinal {
  --font-variant-numeric-ordinal: ordinal;
}

.slashed-zero {
  --font-variant-numeric-slashed-zero: slashed-zero;
}

.lining-nums {
  --font-variant-numeric-figure: lining-nums;
}

.oldstyle-nums {
  --font-variant-numeric-figure: oldstyle-nums;
}

.proportional-nums {
  --font-variant-numeric-spacing: proportional-nums;
}

.tabular-nums {
  --font-variant-numeric-spacing: tabular-nums;
}

.diagonal-fractions {
  --font-variant-numeric-fractions: diagonal-fractions;
}

.stacked-fractions {
  --font-variant-numeric-fractions: stacked-fractions;
}
```

The general idea here is that we build the actual `font-variant-numeric` property value out of CSS custom properties, and we use this incredible hack of setting a custom property to an empty comment to make it possible to provide a no-op default value for every "slot" in the final property value.

I've had to use `/*!*/` rather than `/**/` because most CSS minifiers will strip comments that don't start with a `!`.

Any properties that are incompatible with each other are assigned to the same CSS custom property, so the slots we are filling look like this:

```
font-variant-numeric: [ordinal] [slashed-zero] [lining-nums | oldstyle-nums] [proportional-nums | tabular-nums] | [diagonal-fractions | stacked-fractions]
```

...where every slot on its own is optional.

So magical.


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ca56fc2..d7d3921f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Dark mode variant (experimental) ([#2279](https://github.com/tailwindlabs/tailwindcss/pull/2279))
 - New `preserveHtmlElements` option for `purge` ([#2283](https://github.com/tailwindlabs/tailwindcss/pull/2283))
 - New `layers` mode for `purge` ([#2288](https://github.com/tailwindlabs/tailwindcss/pull/2288))
+- New `font-variant-numeric` utilities ([#2305](https://github.com/tailwindlabs/tailwindcss/pull/2305))
 
 ### Deprecated
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 4e9bb93f..303b2e23 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -69,6 +69,7 @@ import fontStyle from './plugins/fontStyle'
 import textTransform from './plugins/textTransform'
 import textDecoration from './plugins/textDecoration'
 import fontSmoothing from './plugins/fontSmoothing'
+import fontVariantNumeric from './plugins/fontVariantNumeric'
 import letterSpacing from './plugins/letterSpacing'
 import userSelect from './plugins/userSelect'
 import verticalAlign from './plugins/verticalAlign'
@@ -184,6 +185,7 @@ export default function({ corePlugins: corePluginConfig }) {
     textTransform,
     textDecoration,
     fontSmoothing,
+    fontVariantNumeric,
     letterSpacing,
     userSelect,
     verticalAlign,
diff --git a/src/plugins/fontVariantNumeric.js b/src/plugins/fontVariantNumeric.js
new file mode 100644
index 00000000..f881f20b
--- /dev/null
+++ b/src/plugins/fontVariantNumeric.js
@@ -0,0 +1,49 @@
+export default function() {
+  return function({ addUtilities, variants, target }) {
+    if (target('fontVariantNumeric') === 'ie11') {
+      return
+    }
+
+    addUtilities(
+      {
+        '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
+          '--font-variant-numeric-ordinal': '/*!*/',
+          '--font-variant-numeric-slashed-zero': '/*!*/',
+          '--font-variant-numeric-figure': '/*!*/',
+          '--font-variant-numeric-spacing': '/*!*/',
+          '--font-variant-numeric-fractions': '/*!*/',
+          'font-variant-numeric':
+            'var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction)',
+        },
+        '.normal-nums': {
+          'font-variant-numeric': 'normal',
+        },
+        '.ordinal': {
+          '--font-variant-numeric-ordinal': 'ordinal',
+        },
+        '.slashed-zero': {
+          '--font-variant-numeric-slashed-zero': 'slashed-zero',
+        },
+        '.lining-nums': {
+          '--font-variant-numeric-figure': 'lining-nums',
+        },
+        '.oldstyle-nums': {
+          '--font-variant-numeric-figure': 'oldstyle-nums',
+        },
+        '.proportional-nums': {
+          '--font-variant-numeric-spacing': 'proportional-nums',
+        },
+        '.tabular-nums': {
+          '--font-variant-numeric-spacing': 'tabular-nums',
+        },
+        '.diagonal-fractions': {
+          '--font-variant-numeric-fraction': 'diagonal-fractions',
+        },
+        '.stacked-fractions': {
+          '--font-variant-numeric-fraction': 'stacked-fractions',
+        },
+      },
+      variants('fontVariantNumeric')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 2d3ddc9d..8ee217f5 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -704,6 +704,7 @@ module.exports = {
     fontFamily: ['responsive'],
     fontSize: ['responsive'],
     fontSmoothing: ['responsive'],
+    fontVariantNumeric: ['responsive'],
     fontStyle: ['responsive'],
     fontWeight: ['responsive', 'hover', 'focus'],
     height: ['responsive'],


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index e6511009..02e4869d 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -36289,6 +36289,51 @@ video {
   -moz-osx-font-smoothing: auto;
 }
 
+.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
+  --font-variant-numeric-ordinal: /*!*/;
+  --font-variant-numeric-slashed-zero: /*!*/;
+  --font-variant-numeric-figure: /*!*/;
+  --font-variant-numeric-spacing: /*!*/;
+  --font-variant-numeric-fractions: /*!*/;
+  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+}
+
+.normal-nums {
+  font-variant-numeric: normal;
+}
+
+.ordinal {
+  --font-variant-numeric-ordinal: ordinal;
+}
+
+.slashed-zero {
+  --font-variant-numeric-slashed-zero: slashed-zero;
+}
+
+.lining-nums {
+  --font-variant-numeric-figure: lining-nums;
+}
+
+.oldstyle-nums {
+  --font-variant-numeric-figure: oldstyle-nums;
+}
+
+.proportional-nums {
+  --font-variant-numeric-spacing: proportional-nums;
+}
+
+.tabular-nums {
+  --font-variant-numeric-spacing: tabular-nums;
+}
+
+.diagonal-fractions {
+  --font-variant-numeric-fraction: diagonal-fractions;
+}
+
+.stacked-fractions {
+  --font-variant-numeric-fraction: stacked-fractions;
+}
+
 .tracking-tighter {
   letter-spacing: -0.05em;
 }
@@ -77630,6 +77675,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .sm\:ordinal, .sm\:slashed-zero, .sm\:lining-nums, .sm\:oldstyle-nums, .sm\:proportional-nums, .sm\:tabular-nums, .sm\:diagonal-fractions, .sm\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .sm\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .sm\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .sm\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .sm\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .sm\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .sm\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .sm\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .sm\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .sm\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .sm\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -118941,6 +119031,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .md\:ordinal, .md\:slashed-zero, .md\:lining-nums, .md\:oldstyle-nums, .md\:proportional-nums, .md\:tabular-nums, .md\:diagonal-fractions, .md\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .md\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .md\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .md\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .md\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .md\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .md\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .md\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .md\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .md\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .md\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -160252,6 +160387,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .lg\:ordinal, .lg\:slashed-zero, .lg\:lining-nums, .lg\:oldstyle-nums, .lg\:proportional-nums, .lg\:tabular-nums, .lg\:diagonal-fractions, .lg\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .lg\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .lg\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .lg\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .lg\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .lg\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .lg\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .lg\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .lg\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .lg\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .lg\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -201563,6 +201743,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .xl\:ordinal, .xl\:slashed-zero, .xl\:lining-nums, .xl\:oldstyle-nums, .xl\:proportional-nums, .xl\:tabular-nums, .xl\:diagonal-fractions, .xl\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .xl\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .xl\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .xl\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .xl\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .xl\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .xl\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .xl\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .xl\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .xl\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .xl\:tracking-tighter {
     letter-spacing: -0.05em;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 800c031b..a6beadd7 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -15643,6 +15643,51 @@ video {
   -moz-osx-font-smoothing: auto !important;
 }
 
+.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
+  --font-variant-numeric-ordinal: /*!*/ !important;
+  --font-variant-numeric-slashed-zero: /*!*/ !important;
+  --font-variant-numeric-figure: /*!*/ !important;
+  --font-variant-numeric-spacing: /*!*/ !important;
+  --font-variant-numeric-fractions: /*!*/ !important;
+  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction) !important;
+}
+
+.normal-nums {
+  font-variant-numeric: normal !important;
+}
+
+.ordinal {
+  --font-variant-numeric-ordinal: ordinal !important;
+}
+
+.slashed-zero {
+  --font-variant-numeric-slashed-zero: slashed-zero !important;
+}
+
+.lining-nums {
+  --font-variant-numeric-figure: lining-nums !important;
+}
+
+.oldstyle-nums {
+  --font-variant-numeric-figure: oldstyle-nums !important;
+}
+
+.proportional-nums {
+  --font-variant-numeric-spacing: proportional-nums !important;
+}
+
+.tabular-nums {
+  --font-variant-numeric-spacing: tabular-nums !important;
+}
+
+.diagonal-fractions {
+  --font-variant-numeric-fraction: diagonal-fractions !important;
+}
+
+.stacked-fractions {
+  --font-variant-numeric-fraction: stacked-fractions !important;
+}
+
 .tracking-tighter {
   letter-spacing: -0.05em !important;
 }
@@ -33709,6 +33754,51 @@ video {
     -moz-osx-font-smoothing: auto !important;
   }
 
+  .sm\:ordinal, .sm\:slashed-zero, .sm\:lining-nums, .sm\:oldstyle-nums, .sm\:proportional-nums, .sm\:tabular-nums, .sm\:diagonal-fractions, .sm\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/ !important;
+    --font-variant-numeric-slashed-zero: /*!*/ !important;
+    --font-variant-numeric-figure: /*!*/ !important;
+    --font-variant-numeric-spacing: /*!*/ !important;
+    --font-variant-numeric-fractions: /*!*/ !important;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction) !important;
+  }
+
+  .sm\:normal-nums {
+    font-variant-numeric: normal !important;
+  }
+
+  .sm\:ordinal {
+    --font-variant-numeric-ordinal: ordinal !important;
+  }
+
+  .sm\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero !important;
+  }
+
+  .sm\:lining-nums {
+    --font-variant-numeric-figure: lining-nums !important;
+  }
+
+  .sm\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums !important;
+  }
+
+  .sm\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums !important;
+  }
+
+  .sm\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums !important;
+  }
+
+  .sm\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions !important;
+  }
+
+  .sm\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions !important;
+  }
+
   .sm\:tracking-tighter {
     letter-spacing: -0.05em !important;
   }
@@ -51745,6 +51835,51 @@ video {
     -moz-osx-font-smoothing: auto !important;
   }
 
+  .md\:ordinal, .md\:slashed-zero, .md\:lining-nums, .md\:oldstyle-nums, .md\:proportional-nums, .md\:tabular-nums, .md\:diagonal-fractions, .md\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/ !important;
+    --font-variant-numeric-slashed-zero: /*!*/ !important;
+    --font-variant-numeric-figure: /*!*/ !important;
+    --font-variant-numeric-spacing: /*!*/ !important;
+    --font-variant-numeric-fractions: /*!*/ !important;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction) !important;
+  }
+
+  .md\:normal-nums {
+    font-variant-numeric: normal !important;
+  }
+
+  .md\:ordinal {
+    --font-variant-numeric-ordinal: ordinal !important;
+  }
+
+  .md\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero !important;
+  }
+
+  .md\:lining-nums {
+    --font-variant-numeric-figure: lining-nums !important;
+  }
+
+  .md\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums !important;
+  }
+
+  .md\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums !important;
+  }
+
+  .md\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums !important;
+  }
+
+  .md\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions !important;
+  }
+
+  .md\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions !important;
+  }
+
   .md\:tracking-tighter {
     letter-spacing: -0.05em !important;
   }
@@ -69781,6 +69916,51 @@ video {
     -moz-osx-font-smoothing: auto !important;
   }
 
+  .lg\:ordinal, .lg\:slashed-zero, .lg\:lining-nums, .lg\:oldstyle-nums, .lg\:proportional-nums, .lg\:tabular-nums, .lg\:diagonal-fractions, .lg\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/ !important;
+    --font-variant-numeric-slashed-zero: /*!*/ !important;
+    --font-variant-numeric-figure: /*!*/ !important;
+    --font-variant-numeric-spacing: /*!*/ !important;
+    --font-variant-numeric-fractions: /*!*/ !important;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction) !important;
+  }
+
+  .lg\:normal-nums {
+    font-variant-numeric: normal !important;
+  }
+
+  .lg\:ordinal {
+    --font-variant-numeric-ordinal: ordinal !important;
+  }
+
+  .lg\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero !important;
+  }
+
+  .lg\:lining-nums {
+    --font-variant-numeric-figure: lining-nums !important;
+  }
+
+  .lg\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums !important;
+  }
+
+  .lg\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums !important;
+  }
+
+  .lg\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums !important;
+  }
+
+  .lg\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions !important;
+  }
+
+  .lg\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions !important;
+  }
+
   .lg\:tracking-tighter {
     letter-spacing: -0.05em !important;
   }
@@ -87817,6 +87997,51 @@ video {
     -moz-osx-font-smoothing: auto !important;
   }
 
+  .xl\:ordinal, .xl\:slashed-zero, .xl\:lining-nums, .xl\:oldstyle-nums, .xl\:proportional-nums, .xl\:tabular-nums, .xl\:diagonal-fractions, .xl\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/ !important;
+    --font-variant-numeric-slashed-zero: /*!*/ !important;
+    --font-variant-numeric-figure: /*!*/ !important;
+    --font-variant-numeric-spacing: /*!*/ !important;
+    --font-variant-numeric-fractions: /*!*/ !important;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction) !important;
+  }
+
+  .xl\:normal-nums {
+    font-variant-numeric: normal !important;
+  }
+
+  .xl\:ordinal {
+    --font-variant-numeric-ordinal: ordinal !important;
+  }
+
+  .xl\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero !important;
+  }
+
+  .xl\:lining-nums {
+    --font-variant-numeric-figure: lining-nums !important;
+  }
+
+  .xl\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums !important;
+  }
+
+  .xl\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums !important;
+  }
+
+  .xl\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums !important;
+  }
+
+  .xl\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions !important;
+  }
+
+  .xl\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions !important;
+  }
+
   .xl\:tracking-tighter {
     letter-spacing: -0.05em !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 4af6e00d..6c7a8c6a 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -13195,6 +13195,51 @@ video {
   -moz-osx-font-smoothing: auto;
 }
 
+.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
+  --font-variant-numeric-ordinal: /*!*/;
+  --font-variant-numeric-slashed-zero: /*!*/;
+  --font-variant-numeric-figure: /*!*/;
+  --font-variant-numeric-spacing: /*!*/;
+  --font-variant-numeric-fractions: /*!*/;
+  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+}
+
+.normal-nums {
+  font-variant-numeric: normal;
+}
+
+.ordinal {
+  --font-variant-numeric-ordinal: ordinal;
+}
+
+.slashed-zero {
+  --font-variant-numeric-slashed-zero: slashed-zero;
+}
+
+.lining-nums {
+  --font-variant-numeric-figure: lining-nums;
+}
+
+.oldstyle-nums {
+  --font-variant-numeric-figure: oldstyle-nums;
+}
+
+.proportional-nums {
+  --font-variant-numeric-spacing: proportional-nums;
+}
+
+.tabular-nums {
+  --font-variant-numeric-spacing: tabular-nums;
+}
+
+.diagonal-fractions {
+  --font-variant-numeric-fraction: diagonal-fractions;
+}
+
+.stacked-fractions {
+  --font-variant-numeric-fraction: stacked-fractions;
+}
+
 .tracking-tighter {
   letter-spacing: -0.05em;
 }
@@ -28813,6 +28858,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .sm\:ordinal, .sm\:slashed-zero, .sm\:lining-nums, .sm\:oldstyle-nums, .sm\:proportional-nums, .sm\:tabular-nums, .sm\:diagonal-fractions, .sm\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .sm\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .sm\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .sm\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .sm\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .sm\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .sm\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .sm\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .sm\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .sm\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .sm\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -44401,6 +44491,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .md\:ordinal, .md\:slashed-zero, .md\:lining-nums, .md\:oldstyle-nums, .md\:proportional-nums, .md\:tabular-nums, .md\:diagonal-fractions, .md\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .md\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .md\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .md\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .md\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .md\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .md\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .md\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .md\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .md\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .md\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -59989,6 +60124,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .lg\:ordinal, .lg\:slashed-zero, .lg\:lining-nums, .lg\:oldstyle-nums, .lg\:proportional-nums, .lg\:tabular-nums, .lg\:diagonal-fractions, .lg\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .lg\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .lg\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .lg\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .lg\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .lg\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .lg\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .lg\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .lg\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .lg\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .lg\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -75577,6 +75757,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .xl\:ordinal, .xl\:slashed-zero, .xl\:lining-nums, .xl\:oldstyle-nums, .xl\:proportional-nums, .xl\:tabular-nums, .xl\:diagonal-fractions, .xl\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .xl\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .xl\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .xl\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .xl\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .xl\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .xl\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .xl\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .xl\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .xl\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .xl\:tracking-tighter {
     letter-spacing: -0.05em;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index a0ecaa73..442261b0 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -15643,6 +15643,51 @@ video {
   -moz-osx-font-smoothing: auto;
 }
 
+.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
+  --font-variant-numeric-ordinal: /*!*/;
+  --font-variant-numeric-slashed-zero: /*!*/;
+  --font-variant-numeric-figure: /*!*/;
+  --font-variant-numeric-spacing: /*!*/;
+  --font-variant-numeric-fractions: /*!*/;
+  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+}
+
+.normal-nums {
+  font-variant-numeric: normal;
+}
+
+.ordinal {
+  --font-variant-numeric-ordinal: ordinal;
+}
+
+.slashed-zero {
+  --font-variant-numeric-slashed-zero: slashed-zero;
+}
+
+.lining-nums {
+  --font-variant-numeric-figure: lining-nums;
+}
+
+.oldstyle-nums {
+  --font-variant-numeric-figure: oldstyle-nums;
+}
+
+.proportional-nums {
+  --font-variant-numeric-spacing: proportional-nums;
+}
+
+.tabular-nums {
+  --font-variant-numeric-spacing: tabular-nums;
+}
+
+.diagonal-fractions {
+  --font-variant-numeric-fraction: diagonal-fractions;
+}
+
+.stacked-fractions {
+  --font-variant-numeric-fraction: stacked-fractions;
+}
+
 .tracking-tighter {
   letter-spacing: -0.05em;
 }
@@ -33709,6 +33754,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .sm\:ordinal, .sm\:slashed-zero, .sm\:lining-nums, .sm\:oldstyle-nums, .sm\:proportional-nums, .sm\:tabular-nums, .sm\:diagonal-fractions, .sm\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .sm\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .sm\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .sm\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .sm\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .sm\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .sm\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .sm\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .sm\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .sm\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .sm\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -51745,6 +51835,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .md\:ordinal, .md\:slashed-zero, .md\:lining-nums, .md\:oldstyle-nums, .md\:proportional-nums, .md\:tabular-nums, .md\:diagonal-fractions, .md\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .md\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .md\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .md\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .md\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .md\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .md\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .md\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .md\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .md\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .md\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -69781,6 +69916,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .lg\:ordinal, .lg\:slashed-zero, .lg\:lining-nums, .lg\:oldstyle-nums, .lg\:proportional-nums, .lg\:tabular-nums, .lg\:diagonal-fractions, .lg\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .lg\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .lg\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .lg\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .lg\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .lg\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .lg\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .lg\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .lg\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .lg\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .lg\:tracking-tighter {
     letter-spacing: -0.05em;
   }
@@ -87817,6 +87997,51 @@ video {
     -moz-osx-font-smoothing: auto;
   }
 
+  .xl\:ordinal, .xl\:slashed-zero, .xl\:lining-nums, .xl\:oldstyle-nums, .xl\:proportional-nums, .xl\:tabular-nums, .xl\:diagonal-fractions, .xl\:stacked-fractions {
+    --font-variant-numeric-ordinal: /*!*/;
+    --font-variant-numeric-slashed-zero: /*!*/;
+    --font-variant-numeric-figure: /*!*/;
+    --font-variant-numeric-spacing: /*!*/;
+    --font-variant-numeric-fractions: /*!*/;
+    font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  }
+
+  .xl\:normal-nums {
+    font-variant-numeric: normal;
+  }
+
+  .xl\:ordinal {
+    --font-variant-numeric-ordinal: ordinal;
+  }
+
+  .xl\:slashed-zero {
+    --font-variant-numeric-slashed-zero: slashed-zero;
+  }
+
+  .xl\:lining-nums {
+    --font-variant-numeric-figure: lining-nums;
+  }
+
+  .xl\:oldstyle-nums {
+    --font-variant-numeric-figure: oldstyle-nums;
+  }
+
+  .xl\:proportional-nums {
+    --font-variant-numeric-spacing: proportional-nums;
+  }
+
+  .xl\:tabular-nums {
+    --font-variant-numeric-spacing: tabular-nums;
+  }
+
+  .xl\:diagonal-fractions {
+    --font-variant-numeric-fraction: diagonal-fractions;
+  }
+
+  .xl\:stacked-fractions {
+    --font-variant-numeric-fraction: stacked-fractions;
+  }
+
   .xl\:tracking-tighter {
     letter-spacing: -0.05em;
   }