[v4] Add font-stretch utilities (#13153)

* [v4] Add `font-stretch` utilities

Based on #12171 y @Gregory-Gerard.

Add [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) utilities. Naming with `font-stretch` rather than `stretch` since the latter isn't clearly associated with fonts. Named values (e.g. `font-stretch-ulta-expanded`) and percentages (e.g. `font-stretch-50`) are supported.

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `font-stretch` utilities ([#13153](https://github.com/tailwindlabs/tailwindcss/pull/13153))
+
 ### Fixed
 
 - Don't error on `@apply` with leading/trailing whitespace ([#13144](https://github.com/tailwindlabs/tailwindcss/pull/13144))

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -714,6 +714,25 @@ exports[`getClassList 1`] = `
   "font-medium",
   "font-normal",
   "font-semibold",
+  "font-stretch-100",
+  "font-stretch-105",
+  "font-stretch-110",
+  "font-stretch-125",
+  "font-stretch-150",
+  "font-stretch-200",
+  "font-stretch-50",
+  "font-stretch-75",
+  "font-stretch-90",
+  "font-stretch-95",
+  "font-stretch-condensed",
+  "font-stretch-expanded",
+  "font-stretch-extra-condensed",
+  "font-stretch-extra-expanded",
+  "font-stretch-normal",
+  "font-stretch-semi-condensed",
+  "font-stretch-semi-expanded",
+  "font-stretch-ultra-condensed",
+  "font-stretch-ultra-expanded",
   "font-thin",
   "forced-color-adjust-auto",
   "forced-color-adjust-none",

packages/tailwindcss/src/property-order.ts

@@ -257,6 +257,7 @@ export default [
   'font-weight',
   'text-transform',
   'font-style',
+  'font-stretch',
   'font-variant-numeric',
   'line-height',
   'letter-spacing',

packages/tailwindcss/src/utilities.test.ts

@@ -8788,6 +8788,26 @@ test('font-style', () => {
   expect(run(['-italic', '-not-italic'])).toEqual('')
 })
 
+test('font-stretch', () => {
+  expect(run(['font-stretch-ultra-expanded', 'font-stretch-50', 'font-stretch-200']))
+    .toMatchInlineSnapshot(`
+      ".font-stretch-200 {
+        font-stretch: 200%;
+      }
+
+      .font-stretch-50 {
+        font-stretch: 50%;
+      }
+
+      .font-stretch-ultra-expanded {
+        font-stretch: ultra-expanded;
+      }"
+    `)
+  expect(
+    run(['font-stretch', 'font-stretch-20', 'font-stretch-400', 'font-stretch-potato']),
+  ).toEqual('')
+})
+
 test('text-decoration-line', () => {
   expect(run(['underline', 'overline', 'line-through', 'no-underline'])).toMatchInlineSnapshot(`
     ".line-through {

packages/tailwindcss/src/utilities.ts

@@ -2865,6 +2865,32 @@ export function createUtilities(theme: Theme) {
   staticUtility('line-through', [['text-decoration-line', 'line-through']])
   staticUtility('no-underline', [['text-decoration-line', 'none']])
 
+  staticUtility('font-stretch-normal', [['font-stretch', 'normal']])
+  staticUtility('font-stretch-ultra-condensed', [['font-stretch', 'ultra-condensed']])
+  staticUtility('font-stretch-extra-condensed', [['font-stretch', 'extra-condensed']])
+  staticUtility('font-stretch-condensed', [['font-stretch', 'condensed']])
+  staticUtility('font-stretch-semi-condensed', [['font-stretch', 'semi-condensed']])
+  staticUtility('font-stretch-semi-expanded', [['font-stretch', 'semi-expanded']])
+  staticUtility('font-stretch-expanded', [['font-stretch', 'expanded']])
+  staticUtility('font-stretch-extra-expanded', [['font-stretch', 'extra-expanded']])
+  staticUtility('font-stretch-ultra-expanded', [['font-stretch', 'ultra-expanded']])
+  functionalUtility('font-stretch', {
+    themeKeys: [],
+    handleBareValue: ({ value }) => {
+      let num = Number(value)
+      // Only 50-200% (inclusive) are valid:
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage
+      if (Number.isNaN(num) || num < 50 || num > 200) return null
+      return `${value}%`
+    },
+    handle: (value) => [decl('font-stretch', value)],
+  })
+  suggest('font-stretch', () => [
+    {
+      values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
+    },
+  ])
+
   colorUtility('placeholder', {
     themeKeys: ['--background-color', '--color'],
     handle: (value) => [