Add field-sizing utilities (#14469)

This PR adds support for the
[`field-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing)
property which can be used to fit a text inputs, file inputs, textareas,
and selects to the size of the text rather than some implicit default
width.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: thecrypticace

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support `screens` in JS config files ([#14415](https://github.com/tailwindlabs/tailwindcss/pull/14415))
 - Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467))
 - Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468))
+- Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469))
 
 ### Fixed
 

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

@@ -1914,6 +1914,8 @@ exports[`getClassList 1`] = `
   "end-4",
   "end-auto",
   "end-full",
+  "field-sizing-content",
+  "field-sizing-fixed",
   "fill-current",
   "fill-current/0",
   "fill-current/5",

packages/tailwindcss/src/property-order.ts

@@ -42,8 +42,9 @@ export default [
 
   'box-sizing',
   'display',
-  'aspect-ratio',
 
+  'field-sizing',
+  'aspect-ratio',
   'height',
   'max-height',
   'min-height',

packages/tailwindcss/src/utilities.test.ts

@@ -1873,6 +1873,21 @@ test('display', async () => {
   ).toEqual('')
 })
 
+test('field-sizing', async () => {
+  expect(await run(['field-sizing-content', 'field-sizing-fixed'])).toMatchInlineSnapshot(`
+    ".field-sizing-content {
+      field-sizing: content;
+    }
+
+    .field-sizing-fixed {
+      field-sizing: fixed;
+    }"
+  `)
+  expect(
+    await run(['field-sizing-[other]', '-field-sizing-content', '-field-sizing-fixed']),
+  ).toEqual('')
+})
+
 test('aspect-ratio', async () => {
   expect(await run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(`
     ".aspect-4\\/3 {

packages/tailwindcss/src/utilities.ts

@@ -882,6 +882,12 @@ export function createUtilities(theme: Theme) {
   staticUtility('contents', [['display', 'contents']])
   staticUtility('list-item', [['display', 'list-item']])
 
+  /**
+   * @css `field-sizing`
+   */
+  staticUtility('field-sizing-content', [['field-sizing', 'content']])
+  staticUtility('field-sizing-fixed', [['field-sizing', 'fixed']])
+
   /**
    * @css `aspect-ratio`
    */